更新输入影响其他输入尚没有结合

问题描述：

<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] 
      ]

的形式正确地填充。

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

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

任何想法为什么会发生这种情况？

EDIT

观察：我改变了input到一个标准输入（未复选框）。

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

当我尝试更改输入中的文本时，我只能输入一个字符并且输入框“取消选择”（即 - 每输入一个字符我必须在输入框上单击以激活它）根据要求

编辑

HTML输出：

您是否添加了组名？ –

你能解释一下这是什么吗？ –

哦，输入不在'form'标签内，他们需要做什么？ –

答

在第二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（归功于[email protected]）：

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

更新输入影响其他输入尚没有结合

相关推荐