Angular 2：带有复选框的数组无法正常工作

debugcn 发表于 Dev

希伦·马尼亚尔

我正在用 Checkbox 绑定一个数组。但是，当我尝试更改数组的单个元素的 bool 属性时，它会更改所有元素。

我的 HTML 组件如下。

<div class="col-sm-4" *ngFor="let karyalay of karyalayListFinal">
  <div class="checkbox-fade fade-in-primary">
    <label>
      <input formControlName="karyalay_group" type="checkbox" name="karyalaysCheckbox" value="{{karyalay.karyalayId}}" [(ngModel)]="karyalay.isChecked" 
      (click)="callEvents(karyalay.karyalayId)">
      <span>{{karyalay.karyalayName}}</span>
    </label>
  </div>
</div>

现在我正在尝试更改单个或选定元素的值，如下所示。

for (let karyalay of this.karyalayListFinal) {
    let tempInd = _.findIndex(this.roleMasterEventList, {'KARYALAY_ID': karyalay.karyalayId});
    if (tempInd > -1) {
      this.karyalayListFinal[tempInd].isChecked = true;
    }
}

实际上，如果 tempInd > -1 那么应该只更改该元素的值。但它改变了所有人。

不知道这是 ngModel 的问题还是什么？

谢谢

阿布舍克·库马尔

将输入标签放在 *ngFor 内将创建多个输入标签。并且输入的名称属性必须对所有人都不同。作为 HTML 配置使用 name 属性更改输入属性。因此，通过在 *ngFor 中传递的模型中保留一个名称字段，使此名称属性对于每个输入都是唯一的。并针对已检查的属性而不是 ngModel。并执行类似[checked]="yourmodel.isChecked" 的操作，将模型中 isChecked 属性的默认值保留为 false。

希望能帮助到你。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。