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

【问题标题】：Updating input affects other input yet there is no binding更新输入会影响其他输入但没有绑定
【发布时间】：2018-02-13 13:38:08
【问题描述】：

这是我的 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：

【问题讨论】：

你添加组名了吗？
你能解释一下这是什么吗？
哦，输入不在form 标签内，他们需要吗？
我不知道那里发生了什么，但也许你可以从你的数据中创建 angular formgroup
我希望避免这种情况，因为该表是从服务器数据动态填充的，并且使用模板驱动的解决方案更容易。我也很好奇为什么上面的代码会出问题

标签： javascript html angular angular2-directives

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

here 解释了使用 trackBy 的原因（感谢 zoechi@github）：

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

【讨论】：