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

【问题标题】：Angular 2: Array with checkbox not working properlyAngular 2：带有复选框的数组无法正常工作
【发布时间】：2018-11-05 15:14:37
【问题描述】：

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

谢谢

【问题讨论】：

标签： arrays angular checkbox angular2-ngmodel

【解决方案1】：

抱歉，您的方法好像太复杂了。

我不知道你什么时候为每个循环调用这个，但我想你已经知道或有你正在搜索的 id。我们就叫它searchID吧。

如果您想找到具有匹配 id 的对象，只需使用 for each 循环，如下所示：

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

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

【讨论】：

我也试过你的解决方案，但结果是一样的。并且它还会抛出'Expression has changed after it is checked。以前的值：“假”。当前值：“真”。错误
好的。那么，您何时准确调用此代码？在构造函数中？在 onInit()?

【解决方案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;
    }
}

可能“this.karylayListFinal”中的所有元素都满足条件“tempInd > -1”，因此所有元素都在变化。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

输入字段中写入的“名称”属性对于循环创建的每个元素必须是唯一的您必须绑定数组“karylayListFinal”中每个对象的 id 以使其唯一。

【讨论】：

【解决方案5】：

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

希望，它会有所帮助。

【讨论】：

我也做了同样的事情，我也发布了我的答案。谢谢