Angular 2 - 将 ngFor 创建的复选框绑定到布尔数组答案

【问题标题】：Angular 2 - binding checkboxes created by ngFor to a boolean arrayAngular 2 - 将 ngFor 创建的复选框绑定到布尔数组
【发布时间】：2017-02-28 12:51:21
【问题描述】：

我正在使用 ngFor 动态创建项目的下拉列表，循环遍历字符串数组（从 SQL 查询获得），保存在服务中。

<li *ngFor="let vehicleClasses of getVehicleClassList(); let i = index" (click)="toggleCheckBox(i)">
  <a>
    <input type="checkbox" id="vehCB_{{i}}"/>{{vehicleClasses}}
  </a>
</li>

下拉菜单有一个复选框，然后是选择的名称 ({{VehicleClasses}}. 如何存储用户已检查的复选框（最好从服务内部而不是组件中）？
理想情况下，我想要一个存储复选框值的布尔数组。如果可能的话，我是否可以将复选框绑定到一个值，例如，如果一个函数要更改所有复选框布尔值，复选框会更新吗？

我已经看到ngModel 用于其他类似的场景 - 但我无法成功地让它工作。

【问题讨论】：

标签： angular checkbox bind angular-ngmodel

【解决方案1】：

首先，尽量避免在绑定中使用方法

*ngFor="let vehicleClasses of getVehicleClassList();

每次更改检测运行时，都会调用此类方法，并且更改检测会非常频繁地运行。而是将结果分配给一个属性并绑定到该属性。

<li *ngFor="let vehicleClass of getVehicleClasses; let i = index" (click)="cbStatus[i] = !cbStatus[i]">
  <a>
    <input type="checkbox" [(ngModel)]="cbStatus[i]" />{{vehicleClass}}
  </a>
</li>

class MyComponent {
  @Input() set vehicleClasses(value) {
    this.vehicles = value;
    this.cbStatus = [];
    for(var p in this.vehicles) {
      this.vehicles.push(false);
    }
  }
}

【讨论】：

【解决方案2】：

对于在发布问题后如此迅速地发布答案，我深表歉意。如果愿意，我可以删除该问题 - 但如果其他人遇到类似问题。

我没有意识到我可以使用 ngModel 从服务中直接绑定到布尔数组。使用 ngFor 的索引表示法，我可以轻松地将每个复选框绑定到布尔数组中的一个元素：

<li *ngFor="let vehicleClasses of getVehicleClassList(); let i = index" (click)="toggleCheckBox(i)">
  <a>
    <input type="checkbox" id="vehCB_{{i}}" [(ngModel)]="toolbarService.vehicleClassCheckboxes[i]"/>{{vehicleClasses}}
  </a>
</li>

我在服务中编写的直接修改布尔数组的函数导致复选框正确更新。如果其他人有更好的方法来做到这一点，我很想知道 - 尽管这恰好适合我的场景。

【讨论】：