更新入力は他の入力に影響を与え、まだそこここには結合

Question

ではありません私のHTMLです：あなたは、私はそれらを完全に分離することcheckboxes上で一意の名前を設定して見ることができるよう

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

。

formDataは、このような構造を、以下：

formData = [ 
      [false, false], 
      [true, true], 
      [false, true] 
      ] 

フォームが正しく読み込まれます。

チェックボックスが正しく生成されている、しかし、いくつかの奇妙な振る舞いがあります：私は最初の列のチェックボックスをクリックすると

、それはまた、第二列のボックスをチェックします。これは完全なランダムな動作のようですが、2番目の列のチェックボックスをオンにすると、最初の列のチェックボックスには何の影響もありません。

これは何が起こっているのですか？

EDIT

観察：私は標準入力（チェックボックスではない）にinputを変え。

フォームの値をtrue、falseの代わりにtrue、falseに変更しました。

入力のテキストを変更しようとすると、1つの文字しか入力できなくなり、入力ボックスが選択解除されます（つまり、文字を入力するたびに入力ボックスをクリックし続ける必要があります）要求されたよう

EDIT

HTML出力：二ngForでtrackByを使用して

Answer 1

は、それが私のために働く作っ：

テンプレート：

<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関数を定義：trackByを使用する

trackByIndex(index: number, value: number) { 
    return index; 
} 

理由（クレジットはzoechi@githubに行く）hereを説明されています：

あなたは編集中のアイテムを反復していて、それらはプリミティブである 値です。 ngForはIDで追跡することができません。 の値が1から3に（編集によって）変更されると、それは別のアイデンティティになるからです。 インデックスで追跡するカスタムtrackByを使用するか、プリミティブ値の代わりにオブジェクト を使用します。