javascript - "Deselect all checkboxes"不适用于 Angular 属性绑定(bind)

Question

我已经在 Angular 中使用属性绑定(bind)来取消选择所有复选框，但它没有按预期工作。我的预期:当我单击“清除”按钮时选择一个或多个复选框后，它应该取消选择所有复选框。这是我的 plunker

isSelected is the boolean variable which i have used to set the 'checked' attribute of checkbox. 

模板:

<div *ngFor="let item of items">
    <input [checked]="isSelected" type="checkbox">{{item}}
</div>
<button (click)="onClear()">Clear All</button>

组件

private items = ['a', 'b', 'c', 'd'];
  private isSelected = false;
  constructor() {
  }

  onClear(){
    this.isSelected = false;
  }

Answer 1

在您的复选框上设置 ngModel 并使用 ngModelChange 跟踪更改。还设置一个辅助数组来帮助您跟踪选中的状态。这是一个(简化的)示例:

HTML

<input [ngModel]="isSelected[i]" (ngModelChange)="onChange(i)" type="checkbox">{{item}}

typescript

 isSelected =  [];
 constructor() {
   this.onClear();
 }

 onChange(i){
    this.isSelected[i]=!this.isSelected[i]
  }
  onClear(){
    this.isSelected = [false, false, false, false];
  }

DEMO