Angular 2/Material 2: Checkbox checked binding

Question

У меня есть приложение с угловым 2 (2.4.3) с использованием материала (2.0.0-beta.1), и у меня возникли проблемы с привязкой на флажках.

Я хочу иметь флажок, который условно проверен в соответствии с логическим значением в моем компоненте. Когда вы нажимаете, я хочу переключить bool.

Так что я сделал это:

private _showName: boolean = true; 

и в HTML:

<md-checkbox (click)="toggleName()" [checked]="_showName"></md-checkbox> 

И toggleName() выглядит следующим образом:

toggleName(): void { 
    this._showName = !this._showName; 
    let ctrl = this._searchForm.get('name'); 
    ctrl.enabled ? ctrl.disable() : ctrl.enable(); 
} 

Используя это, когда я нажимаю на флажок:

• BOOL _showName получает переключен к ложным
• Но флажок остается проверено

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

Если установить [checked], используя строку, как это:

<md-checkbox (click)="toggleName()" [checked]="true"></md-checkbox> 

Флажка неустановленный себя на первый щелчок и BOOL переключается, но теперь нет никакого способа для меня, чтобы привязать его к BOOL. Поэтому, если я изменю bool из моего компонента, он не будет отображаться в этом флажке.

Я, вероятно, что-то делаю неправильно, но смотрю «Примеры» в official documentation Я не могу понять, где я иду не так.

Answer 1

Я думаю, это работает:

<md-checkbox (click)="toggleName()" [attr.checked]="_showName"></md-checkbox> 

Answer 2

Проблема заключается в том, что вы проверяете и снимите его немедленно. Удалите [checked] связывания, и не делают this._showName = !this._showName; внутри метода toggleName():

toggleName(): void { 
    let ctrl = this._searchForm.get('name'); 
    ctrl.enabled ? ctrl.disable() : ctrl.enable(); 
} 

шаблона:

<md-checkbox (click)="toggleName()"></md-checkbox> 

При нажатии она будет проверена и автоматически отключена. Но вы сняли флажок или снова проверили его, установив this._showName.

Answer 3

Лучшим способом было бы привязать данные к переменной с помощью элемента управления md-checkbox.

 <md-checkbox [(ngModel)]="_showName">{{_showName }} 

Материал Компонент поставляется с хорошей документацией и plunker примеров. Вот как вы можете найти их How to open examples in plunker.

Кроме того, если нажать «<» или «>», вы можете просматривать исходный код, находясь на странице