手动选中复选框后无法通过编程方式取消选中：Angular

Question

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

In the sample app，单击复选框进行检查。现在，单击“取消选中”按钮。后台的属性更改为false，但该复选框不会取消选中。

注意：

如果未手动检查，则检查和取消检查均以编程方式进行。

Link to the code editor

Answer 1

将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中的类字段的约定是以小写字母开头的文字。

Answer 2

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

您需要双向绑定，或更准确地说，现在可以但不能设置该值。这样一来，您可能需要逻辑设定器。

• 如果您不会像在代码中那样使用ngModel，请使用(change)事件设置新值和设置器：

  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)

相同