Question

我使用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在其他类似场景中使用过了 - 但我无法成功地使用它。

Answer 1

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

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

{{1}}

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

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

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

2 个答案: