更新输入会影响其他输入但没有绑定

Question

这是我的 HTML:

<tr *ngFor="let row of formData; let i = index" [attr.data-index]="i">
    <td *ngFor="let rowdata of formData[i]; let j = index" [attr.data-index]="j">
        <input type="checkbox" name="row-{{i}}-{{j}}" [(ngModel)]="formData[i][j]">
    </td>
</tr>

如您所见，我在 checkboxes 上设置了唯一名称以将它们完全隔离。

formData 遵循这样的结构：

formData = [
            [false, false],
            [true, true],
            [false, true]
          ]

表单正确填充。

复选框生成正确，但是，有一些奇怪的行为：

当我点击第一列的复选框时，它也会选中第二列的复选框；这似乎是完全随机的行为，但是当我选中第二列的复选框时，它对第一列的复选框没有影响

知道为什么会这样吗？

编辑

观察：我将input更改为标准输入（不是复选框）。

我将表单值更改为 "true"、"false".. 而不是 true、false。

当我尝试更改输入中的文本时，我只能输入一个字符和输入框 "deselects"（即，每次输入时我都必须不断单击输入框以激活它一个字符）

编辑

HTML 按要求输出：

Answer 1

在第二个 ngFor 中使用 trackBy 使它对我有用：

模板：

<tr *ngFor="let row of formData['rows']; let i = index;" [attr.data-index]="i">
    <td *ngFor="let rowdata of formData['rows'][i]; let j = index; trackBy: trackByIndex" [attr.data-index]="j">
      <input type="checkbox" id="row-{{i}}-{{j}}" name="row-{{i}}-{{j}}" [(ngModel)]="formData['rows'][i][j]"/>
    </td>
</tr>

分量：

定义 trackByIndex 函数：

trackByIndex(index: number, value: number) {
  return index;
}

解释了使用 trackBy 的原因 here (credit goes to zoechi@github) :

you're iterating the items you're editing and they are primitive values. ngFor can't keep track by identity because when the value changes from 1 to 3 (by editing) it becomes a different identity. Either use a custom trackBy that tracks by index or use objects instead of primitive values.

更新输入会影响其他输入但没有绑定

Updating input affects other input yet there is no binding

html

javascript

angular2-directives

angular