Angular 2 ngModel綁定嵌套ngFor

Question

我試圖將Angular 1應用程序轉換爲Angular 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

一個問題，任何幫助將是非常讚賞的方式有問題

Answer 1

更新

使用ngForTrackBy官方的方式似乎是

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

更多細節

見 http://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

注意:在trackBy:customTrackBy

原

您可以使用*ngForTrackBy此：

@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 s和false s有相同的身份。如果沒有*ngForTrackBy Angular會追蹤哪個true或false處於哪個位置。用*ngForTrackBy="customTrackBy"我們讓*ngFor使用索引代替對象標識。

Plunker example

又見

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