手动检查复选框后无法以编程方式取消选中：Angular答案

【问题标题】：Can't uncheck programatically after manual check on a checkbox: Angular手动检查复选框后无法以编程方式取消选中：Angular
【发布时间】：2018-07-21 06:05:49
【问题描述】：

一旦从 UI 中选中（点击 checkbox），我就无法以编程方式取消选中该复选框。

In the sample app，点击复选框即可。现在单击“取消检查”按钮。后台属性变为false，但复选框不会取消选中。

注意：

如果不手动检查，检查和取消检查都以编程方式工作。

Link to the code editor

【问题讨论】：

标签： angular typescript checkbox

【解决方案1】：

在您的代码中，input [checked] 是一种单向绑定。

您需要 2 路绑定或更准确地说，您现在可以获取但无法设置该值。有了这个，你可能需要一个符合你逻辑的设置器。

如果您不会像在代码中那样使用ngModel，请使用(change) 事件来设置新值和setter：
```
get IsChecked(): boolean {
  return this._isChecked;
}
set IsChecked(val) {
  this._isChecked = val;
}
```
和html：<input type="checkbox" [checked]="IsChecked" (change)="IsChecked = !IsChecked"/>
另一种方法是使用ngModel。

<input type="checkbox" [(ngModel)]="IsChecked"/> 如果开发是：

<input type="checkbox" [ngModel]="IsChecked" (ngModelChange)="IsChecked = !$event"/> 这与[checked] 和(change) 的作用相同

【讨论】：

为什么没有二传手就不能工作。这个想法是只绑定单向。当用户单击复选框时，我不希望更新我的模型。但从后台以编程方式/及时。一旦我手动单击复选框，绑定是否会损坏。因为标签仍然显示预期值？
因为需要更新私有值_isChecked，所以不能直接通过html访问。看看“访问器”typescriptlang.org/docs/handbook/classes.html
如果您不想使用访问器，请使用方法：(change)="updateIsChecked($event)" 和 TS：updateIsChecked() { this._isChecked = !this._isChecked; }

【解决方案2】：

将app.component.html中的输入改为：

<input type="checkbox" [checked]="IsChecked" (change)="onCheckedChanged()" />

并将以下内容添加到您的app.component.ts：

  onCheckedChanged() {
   this._isChecked = !this._isChecked;
  }

为什么：

虽然您将选中的属性正确绑定到 IsChecked getter，但这仅反映对 IsChecked 的更改，因此按钮可以正常工作。

IsChecked 在您单击输入字段的勾号时不会更改，因此您必须侦听更改事件并以编程方式更新IsChecked（实际上是this._isChecked）属性。

顺便说一句，据我所知，Typescript 和 angular 中类字段的约定是以小写字母开头的。

【讨论】：