Angular 4选择所有复选框答案

【问题标题】：Angular 4 select all checkboxesAngular 4选择所有复选框
【发布时间】：2019-04-30 11:37:42
【问题描述】：

我正在尝试实现全选复选框，这将选择所有复选框，这很好，但是当我单击除全选以外的其他复选框时它将再次选中所有复选框

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

}

【问题讨论】：

每个复选框使用相同的模型：[(ngModel)]="a.selected"。因此，当您选中其中一个时，它会更新共享同一模型的所有复选框。如果需要单独检查，则需要为每个复选框赋予不同的模型。
@AlexK 喜欢 b.selected？
@AlexK 我应该创建一个不同的模型吗？
@AlexK 否。每个 a.selected 将在循环时由 Angular 单独管理。
对于name 中的每个a，您创建三个复选框：家庭信息、房屋图像和地图访问。所有三个复选框都引用同一个模型：a.selected。如果它们需要独立，则需要为每个复选框赋予不同的模型。

标签： javascript angular select checkbox

【解决方案1】：

删除[ngModelOptions]="{standalone: true}"，它应该可以工作。更多信息请参考this链接。

【讨论】：