Я довольно новичок в Angular2 и у меня есть небольшая проблема:

В моем Login-Component-HTML есть два флажка, которые я хочу связать двухсторонней привязкой данных к Login-Component-TypeScript.

Это HTML:

А это Component.ts:

import { Component, OnInit }    from '@angular/core';
import { Router }               from '@angular/router';
import { Variables }            from '../../services/variables';

@Component({
    selector: 'login',
    moduleId: module.id,
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css']
})


export class LoginComponent implements OnInit {

    private saveUsername: boolean = true;
    private autoLogin: boolean = true;
    constructor(private router: Router, private variables: Variables) { }

    ngOnInit() { 
        this.loginValid = false;
        // Get user name from local storage if you want to save

        if (window.localStorage.getItem("username") === null) {
           this.saveUsername = true;
           this.autoLogin = true;
           console.log(this.saveUsername, this.autoLogin);
        } else {
           console.log("init", window.localStorage.getItem("username"));
        }
    }

    login(username: string, password: string, saveUsername: boolean, autoLogin: boolean) {
        this.variables.setUsername(username);
        this.variables.setPassword(password);
        this.variables.setIsLoggedIn(true);
        console.log(saveUsername, autoLogin);
        //this.router.navigate(['dashboard']);
    }

Если я нажимаю на флажок, я получаю правильное значение в контроллере (компоненте).

Но если я изменяю значение, например, saveUsername в компоненте, флажок не "получает" новое значение.

Так что я не могу управлять флажком из компонента (как я хочу сделать в ngOnInit в компоненте.

Спасибо за помощь!

Ответы (15)

Вы можете удалить .selected из saveUsername в вашем вводе checkbox, поскольку saveUsername является булевой величиной. Вместо [(ngModel)] используйте [checked]="saveUsername" (change)="saveUsername = !saveUsername"

Редактирование: Правильное решение:


Обновление: Как заметил @newman, когда ngModel используется в форме, он не будет работать. Однако вы должны использовать атрибут [ngModelOptions], как (проверено в Angular 7):

 `

Я также создал пример на Stackblitz: https://stackblitz.com/edit/angular-abelrm

Вы должны добавить атрибут name="selected" к элементу input.

Например:

Angular: "9.0.0"
Angular CLI: 9.0.1
Node: 13.10.1
OS: linux x64

.html файл

 " I Accept"

.ts файл

userConsent: boolean = false;

Я предпочитаю что-то более явное:

component.html


component.ts

public saveUsername:boolean;

public onSaveUsernameChanged(value:boolean){
    this.saveUsername = value;
}

Я сделал пользовательский компонент, попробовал двухстороннее связывание

Микрокомпонент:

_model:  boolean;   

@Output() checked: EventEmitter = new EventEmitter();

@Input('checked')
set model(checked: boolean) {

  this._model = checked;
  this.checked.emit(this._model);
  console.log('@Input(setmodel'+checked);
}

get model() {
  return this._model;
}

Странно, что это работает


пока это не произойдет


Если вы хотите использовать checkbox с циклом for, то обходной путь для достижения той же цели - хранить состояние checkbox в массиве и изменять его в зависимости от индекса цикла *ngFor. Таким образом вы сможете изменять состояние флажка в вашем компоненте.

app.component.html

{{ item.name}}

app.component.ts

items = [
    {'name':'salad'},
    {'name':'juice'},
    {'name':'dessert'},
    {'name':'combo'}
  ];

  category= []

  checkChange(i){
    if (this.category[i]){  
      this.category[i] = !this.category[i];
    }
    else{
      this.category[i] = true;
    }
  }

В Angular p-checkbox,

Используйте все атрибуты p-checkbox



И что еще более важно, не забудьте включить [ngModelOptions]="{standalone: true}, так как это спасло мой день.

Я знаю, что это может быть повторным ответом. но для тех, кто хочет загрузить список чекбоксов с selectall checkbox в форму angular, я следую этому примеру: Select all/deselect all checkbox using angular 2+

это работает хорошо, но просто нужно добавить

[ngModelOptions]="{standalone: true}" 

окончательный HTML должен выглядеть следующим образом:

  • {{n.name}}

TypeScript

  selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }

надеюсь, это поможет спасибо

Я работаю с Angular5, и мне пришлось добавить атрибут "name", чтобы привязка работала... Атрибут "id" не требуется для привязки.


Для двусторонней привязки данных можно использовать что-то вроде этого:


Моя директива angular как в angularjs (ng-true-value ng-false-value)

@Directive({
    selector: 'input[type=checkbox][checkModel]'
})
export class checkboxDirective {
    @Input() checkModel:any;
    @Input() trueValue:any;
    @Input() falseValue:any;
    @Output() checkModelChange = new EventEmitter();

    constructor(private el: ElementRef) { }

    ngOnInit() {
       this.el.nativeElement.checked = this.checkModel==this.trueValue;
    }

    @HostListener('change', ['$event']) onChange(event:any) {
        this.checkModel = event.target.checked ? this.trueValue : this.falseValue;
        this.checkModelChange.emit(this.checkModel);
    }

}

html


При использовании синтаксиса на angular.

Это переводится как:

Это означает, что ваш компонент должен иметь:

@Input() bar;
@Output() barChange = new EventEmitter();

В любой ситуации, если вам нужно связать значение с чекбоксом, который не является булевым, вы можете попробовать следующие варианты

В Html-файле:

в компонентеischeckedWithOutBoolean: any = 'Y';

Смотрите в стекблице https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html

Чтобы заставить чекбокс работать, необходимо выполнить следующие шаги:

  1. импортируйте FormsModule в свой модуль
  2. Поместите ввод внутри тега form
  3. Ваш ввод должен выглядеть следующим образом:

    
    

    Примечание: не забудьте указать имя в поле ввода.

К сожалению, решение, предложенное @hakani, не является двусторонним связыванием. Оно просто обрабатывает одностороннее изменение модели из UI/FrontEnd части.

Иначе говоря, просто:


Сделайте двустороннее связывание для флажка.

После этого, когда модель checkboxFlag изменяется из Backend или UI части - вуаля, checkboxFlag хранит фактическое состояние флажка.

Чтобы быть уверенным, я подготовил код Plunker для представления результата : https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Чтобы дополнить этот ответ, вы должны включить import { FormsModule } from '@angular/forms' в app.module.ts и добавить в массив imports, т.е.

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

2022 WebDevInsider