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

Question

这是我的HTML：

 var sTrace = new StackTrace(sqlEx, true);
 if (sTrace != null)
  {
    // var frame = sTrace.GetFrame(sTrace.FrameCount - 1);
    var frame = sTrace.GetFrames().Last();
    LineNumber = frame.GetFileLineNumber();
    SrcFileName = frame.GetFileName();
    MethodName = frame.GetMethod().ReflectedType.FullName + "." + frame.GetMethod().Name;
  }

正如您所看到的，我在<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] ] 更改为标准输入（不是复选框）。

我将表单值更改为“true”，“false”..而不是true，false。

当我尝试更改输入中的文本时，我只能输入一个字符并且输入框“取消选择”（即 - 我必须一直点击输入框以在每次键入字符时激活它）< / p>

修改

按要求输出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（信用转到zoechi@github）：

  

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