Angular 4選中所有復選框

Question

我正在嘗試實現全選復選框，這將選擇所有復選框，但是當我單擊除全選以外的其他復選框時，它將再次選擇所有復選框

HTML文件

<div class="form-check mt-3">
  <label class="form-check-label text-dark font-weight-bold">
                <input class="form-check-input" type="checkbox" value="" [(ngModel)]="selectedAll" [ngModelOptions]="{standalone:
       true}" (change)="selectAll()">
                Select All
                <span class="form-check-sign">
                <span class="check"> </span>
              </span>
              </label>
</div>

<div *ngFor="let a of name">

  <div class="d-flex justify-content-between">

    <!--------------------div to justify content --------------------->
    <div class="">

      <div class="form-check mt-3">
        <label class="form-check-label text-dark">
                    <input class="form-check-input" type="checkbox" value="" [(ngModel)]="a.selected" [ngModelOptions]="{standalone:
       true}" (change)="checkIfAllSelected()">
                    Household Information
                    <span class="form-check-sign">
                <span class="check"> </span>
              </span>
                  </label>
      </div>

      <div class="form-check mt-3">
        <label class="form-check-label text-dark">
                    <input class="form-check-input" type="checkbox" value="" [(ngModel)]="a.selected" [ngModelOptions]="{standalone:
       true}" (change)="checkIfAllSelected()">
                    House Images
                    <span class="form-check-sign">
                <span class="check"> </span>
              </span>
                  </label>
      </div>

      <div class="form-check mt-3">
        <label class="form-check-label text-dark">
                    <input class="form-check-input" type="checkbox" value="" [(ngModel)]="a.selected" [ngModelOptions]="{standalone:
       true}" (change)="checkIfAllSelected()">
                    Map Access
                    <span class="form-check-sign">
                <span class="check"> </span>
              </span>
                  </label>
      </div>
    </div>

ts文件

selectAll() {
  for (let i = 0; i < this.name.length; i++) {
    {
      this.name[i].selected = this.selectedAll;
    }
  }
}

checkIfAllSelected() {

  console.log(this.name);

  this.selectedAll = this.name.every(function(item: any) {
    console.log(item);
    return item.selected == true;
  })

}

Answer 1

刪除[ngModelOptions]="{standalone: true}" ，它應該可以工作。 有關更多信息，請參考此鏈接。