角度2 ngModelはネストされたngでバインドします

Question

角度2のアプリに変換しようとしています。ブールのギザギザの配列をループします(boolean[][])。私は、次のコードでcheckboxesをレンダリングしています：チェックボックスが正しく表示さ

<div *ngFor="#cell of CellData; #parentIndex = index"> 
    <input *ngFor="#col of cell; #childIndex = index" type="checkbox" [(ngModel)]="CellData[parentIndex][childIndex]" />  
</div> 

私は、チェックボックスを選択した場合、しかし、それの右に1も選択されています。

このロジックはので、私はそれがすべてのヘルプははるかに高く評価されるだろう、私はngModelまたは角2

の問題を使用しています方法に問題だかはわからないアンギュラ1つのアプリで正常に動作します

Answer 1

更新

ngForTrackByを使用する公式の方法は

 <input 
      *ngFor="let col of cell; let childIndex=index; trackBy:customTrackBy" 
      type="checkbox" 
      [(ngModel)]="CellData[parentIndex][childIndex]" />  

のようです

詳細

ノートtrackBy:customTrackByあなたはこのために*ngForTrackByを使用することができます

元

で:ためhttp://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.htmlを参照してください：デフォルトのトラックによって角度

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let cell of CellData; let parentIndex = index"> 
     <input 
      *ngFor="let col of cell; let childIndex = index" type="checkbox" 
      *ngForTrackBy="customTrackBy" 
      [(ngModel)]="CellData[parentIndex][childIndex]" />  
    </div> 

    Data:<br/><br/> 
    {{CellData | json}} 
    ` 
}) 
export class AppComponent { 
    constructor() { 
    this.CellData = [ 
     [ true, false, true, false ], 
     [ false, true, false, true ] 
    ] 
    } 

    customTrackBy(index: number, obj: any): any { 
    return index; 
    } 
} 

オブジェクトのアイデンティティが、異なるtrueおよびfalseは同じ身元を持っています。なし*ngForTrackBy角ループはどのtrueまたはfalseがどの位置にあるかを追跡します。 *ngForTrackBy="customTrackBy"では、*ngForはオブジェクトIDの代わりにインデックスを使用します。

Plunker example

あなたが問題を示していPlunkerを提供することができます

• https://github.com/angular/angular/issues/4402