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＆gt; -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;
    }
}

可能是“this.karyalayListFinal”中所有元素都满足条件“ tempInd＆gt; -1 ”，因此所有元素都在变化。

Answer 3

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

Answer 4

＆＃34;名称＆＃34;在输入字段中写入的属性对于循环创建的每个元素必须是唯一的你必须绑定数组中每个对象的id＆＃34; karyalayListFinal＆＃34;使它们独一无二。

Answer 5

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

希望，这有帮助。

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

5 个答案: