Question

我有一个使用Material（2.0.0-beta.1）的Angular 2（2.4.3）应用程序，我面临着复选框绑定的一些问题。

我希望根据组件中的布尔值有条件检查复选框。点击后，我想切换布尔。

所以我这样做了：

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被切换为false
但复选框保持检查

第二次单击复选框时，它会取消选中并再次切换bool，从而使逻辑反转。

如果我使用这样的字符串设置[checked]：

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

复选框在第一次单击时取消选中并切换bool，但现在我无法将其绑定到bool。因此，如果我从我的组件中更改bool，它将不会反映到该复选框。

我可能做错了什么，但看着＆＃34;例子＆＃34;在official documentation，我无法弄清楚我哪里出错了。

Answer 1

最好的方法是将数据绑定到md-checkbox控件。

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

Material组件附带了一个很好的文档和plunker示例。您可以通过以下方式找到它们 How to open examples in plunker。

此外，如果您点击“＆lt;”或“＆gt;”，您可以在页面上浏览源代码

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再次自己检查。

Angular 2 / Material 2：复选框检查绑定

2 个答案: