更新輸入影響其他輸入尚沒有結合

這裏是我的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] 
      ]

的形式正確地填充。

複選框被正確地生成，但是，有一些古怪的行爲：

當我點擊用於第一列中的複選框，它也檢查第二列中的框;這似乎是完全隨機的行爲，但是當我檢查第二列的框時，它對第一列的複選框沒有影響

任何想法爲什麼會發生這種情況？

EDIT

觀察：我改變了input到一個標準輸入（未複選框）。

我將表單值更改爲「true」，「false」..而不是true，false。

當我嘗試更改輸入中的文本時，我只能輸入一個字符並且輸入框「取消選擇」（即 - 每輸入一個字符我必須在輸入框上單擊以激活它）根據要求

編輯

HTML輸出：

來源

2017-09-05 Dennis Callanan

您是否添加了組名？ –

你能解釋一下這是什麼嗎？ –

哦，輸入不在'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，也可以使用對象而不是原始值。

來源

2017-09-05 12:47:57 RogerC

更新輸入影響其他輸入尚沒有結合

回答

相關問題