1

我有一个使用 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
  • 但复选框保持选中状态

第二次单击复选框时，它会取消选中自身并再次切换布尔值，从而使逻辑颠倒。

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

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

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

我可能做错了什么，但是查看官方文档中的“示例”我无法弄清楚我哪里出错了。

4

2 回答 2

1

最好的方法是将变量与 md-checkbox 控件进行数据绑定。

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

Material 组件附带了一个很好的文档和 plunker 示例。这是您如何找到它们的方法 如何在 plunker 中打开示例。

此外，如果您单击“<”或“>”，您可以在页面上浏览源代码

于 2017-06-13T13:28:10.947 回答
0

问题是您立即选中并取消选中它。去掉[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 再次自己检查。

于 2017-01-18T14:24:48.960 回答