“取消選中所有復選框”不使用角度屬性綁定

Question

我在angular中使用了屬性綁定來取消選中所有復選框，但它沒有按預期工作。 我的期望：當我點擊“清除”按鈕選擇一個或多個復選框后，它應該取消選中所有復選框。 這是我的傻瓜

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}}

打字稿

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

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

DEMO

Answer 2

一個解決方案是

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

使用模板：

private items = [ {'label':'a', 'checked': false },
  {'label':'b', 'checked': false},
  {'label':'c', 'checked': false},
  {'label':'d', 'checked': false}];

onClear(){
    for ( let cb of this.items ) {
      cb.checked = false;
    }
  } 

Answer 3

首先，你應該知道[checked]不工作，你應該使用[（ngModel）]這個東西，你應該從@ angular / forms導入FormModule。

第二，你應該有多個isSelected變量，因為如果你在選擇其中一個時只使用一個isSelected變量，那么所有的復選框都將被選中，因為你可以在.ts文件中使用這樣的數組，

items = [{name: 'a', isSelected:false}, 
         {name: 'b', isSelected:false},
         {name: 'c', isSelected:false},
         {name: 'd', isSelected:false}];

並在HTML中

<div *ngFor="let item of items">
    <input [(ngModel)]="item.isSelected" type="checkbox">{{item.name}}
</div>