角度材质复选框行为答案

【问题标题】：Angular Material checkbox behavior角度材质复选框行为
【发布时间】：2018-09-15 20:24:52
【问题描述】：

我的主要问题是复选框的 [checked] 属性绑定到一个从未设置为 true 的值。现在，为什么切换工作？这是一个错误还是我在这里做错了什么？

请忽略 fork 的文件命名。这是我分叉并添加复选框的选择值闪电战。

编辑：假设我设置了 [(ngModel)] 并将其绑定到 termsAndCondition 属性。我添加 (ngModelChange) 事件并始终将 termsAndCondition 属性设置为 false。为什么css仍然改变？（选中和取消选中样式）

【问题讨论】：

它作为一个复选框工作。所有复选框具有相同的行为。但是因为没有绑定，termAndConditionsAccepted 的值不会因为点击而改变，这就是需要toggleCheck的地方
也许我的措辞令人困惑。我想证明已绑定复选框的 [checked] 属性始终设置为 false（即使在 toggleCheck() 函数中也是如此）。如果我更改它并添加 [(ngModel)] 并将其绑定到 termsAndConditions 属性和 (ngModelChange) 事件，我总是将 termsAndConditions 属性设置为 false，为什么复选框仍然无法响应 ngModel 并做自己的事情?
我猜，就像你说的那样。即使是最简单的复选框也只会做自己的复选框，并在您单击它们时切换/取消切换，无论它们绑定到什么模型。我必须找到另一种方法来完成我想要实现的目标。
是的，复选框具有切换其状态的行为。如果你想让它不响应，你可能想使用 [disabled] 属性？

【解决方案1】：

我在有关使用直接变量的角度项目中发现了同样的问题。

一直对我有用的是使用函数调用。例如

<mat-checkbox [checked]="isAccepted()" (click)="toggleCheck()">
  Accept Terms And Conditions
</mat-checkbox>

在你的 ts 中，声明 isAccepted()

  isAccepted() {
    return this.termsAndConditionsAccepted;
  }

顺便说一句，您的 toggleCheck 不正确。应该是

this.termsAndConditionsAccepted = !this.termsAndConditionsAccepted;

【讨论】：

对函数名称的混淆表示歉意。我不想让它成为一个开关。我想证明 [checked] 属性绑定的属性始终设置为 false，但仍然会发生检查和取消检查。
hmm.. 试图了解您的要求。当复选框第一次呈现时，它将被取消选中（从 termsAndConditionsAccepted 获取值）。当您单击复选框时，它将切换检查状态。但是由于您没有绑定变量，因此设置 toggleCheck 来修改该值将不起作用。你看过@nana 的答案吗？也许这就是你要找的。span>
我有。实际上，我已经编辑了我的问题并添加了更多关于如何在使用 ngModel 和 ngModelChange 时重现此问题的内容。

【解决方案2】：

您需要使用 ngModel 将复选框绑定到组件中的变量。

<mat-checkbox [(ngModel)]="termsAndConditionsAccepted">

【讨论】：