由ngFor创建的Angular 2 - 绑定复选框到布尔数组-Java 学习之路

我使用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 用于其他类似的场景 - 但我还没有成功地使它工作 .

2 回答

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

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

回复于 2024-04-28T09:53:57+08:00

1
我很抱歉在发布问题后如此迅速地发布了答案 . 我可以删除这个问题，如果愿意 - 但万一其他人遇到类似的问题 .

I didn't realise I could use ngModel to directly bind to a boolean array from within a service. 使用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>
```
我在直接修改布尔数组的服务中编写的函数导致复选框正确更新 . 如果其他人有更好的方式做到这一点，我很想知道 - 虽然这恰好适合我的情况 .
回复于 2024-04-28T09:53:57+08:00

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

2 回答

相关问题