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

Question

我正在用 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 问题还是什么？

谢谢

Answer 1

抱歉，看来你的方法太复杂了。

我不知道您何时为每个循环调用此方法，但我想您此时已经知道或拥有要搜索的 ID。我们称它为 searchID.

如果要查找具有匹配 ID 的对象，只需使用 for each 循环，如下所示：

this.karyalayListFinal.forEach( el =>  {
   if(el.karyalayId === searchID) {
      el.isChecked = true;
   }         
});

这应该可以解决您的问题。

Answer 2

你是运行这个循环 "this.karyalayListFinal"

中的所有元素

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”可能满足 "this.karyalayListFinal" 中的所有元素，因此所有元素都在变化。

Answer 3

我在 HTML 代码中使用了 [checked]="karyalay.isChecked" 而不是 ngModel，它开始工作了。

Answer 4

"name" 写入输入字段的属性对于循环创建的每个元素必须是唯一的您必须绑定数组中每个对象的 ID "karyalayListFinal" 以使它们唯一。

Answer 5

将输入标签放入 *ngFor 将创建多个输入标签。输入的名称属性必须不同。作为 HTML 使用名称属性配置输入属性的更改。因此，通过在传入 *ngFor 的模型中保留一个名称字段，使这个名称属性对于每个输入都是唯一的。并针对选中的属性而不是 ngModel。并做类似的事情 [checked]="yourmodel.isChecked"，将模型中 isChecked 属性的默认值保持为 false。

希望对你有所帮助。

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

Angular 2: Array with checkbox not working properly

arrays

checkbox

angular2-ngmodel

angular