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

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.

当我尝试更改输入中的文本时,我只能输入一个字符并且输入框"取消选择"(即 - 我必须一直点击输入框以在每次键入字符时激活它)

编辑

请求的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 的原因（感谢zoechi@github）：

您正在迭代正在编辑的项目，它们是原始值。ngFor 无法通过身份进行跟踪，因为当值从 1 更改为 3（通过编辑）时，它会变成不同的身份。使用按索引跟踪的自定义 trackBy 或使用对象而不是原始值。