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

我正在使用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在其他类似场景中使用，但我未能成功使其工作。

我很抱歉在发布问题后这么快就发布了答案。如果愿意的话，我可以删除这个问题，但以防其他人遇到类似的问题

我没有意识到我可以使用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>

---

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

我很抱歉在发布问题后这么快就发布了答案。如果愿意的话，我可以删除这个问题，但以防其他人遇到类似的问题

我没有意识到我可以使用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>

---

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

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

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

---

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

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