Köşeli 2 ngModel yuvalanmış ngFor'a hizala

Question

Angular 1 uygulamasını Angular 2'ye dönüştürmeye çalışıyorum. (boolean[][]) booleanların pürüzlü bir dizisiyle döngü oluşturmaya çalışıyorum. Aşağıdaki kod ile checkboxes dışarı render ediyorum:

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

doğru onay kutularını ekran, ancak, onun sağındaki biri de seçilmiş bir onay kutusu seçerseniz.

Bu mantık yüzden Herhangi bir yardım çok takdir ben ngModel veya Açısal 2.

ile bir sorunu kullanıyorum şekilde bir sorun olup olmadığından emin değilim Açısal 1 app çalışıyor

Answer 1

Güncelleme

ngForTrackBy kullanmak, resmi yol olarak görünmektedir

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

.210

fazla ayrıntı

için http://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.html bakın

not :trackBy:customTrackBy yılında

orijinal Bunun için *ngForTrackBy kullanabilirsiniz

:

varsayılan olarak Açısal

@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; 
    } 
} 

nesne kimliğini izler ama farklı true s ve false s aynı kimliğe sahiptir. *ngForTrackBy olmadan Açısal, hangi konumda true veya false hangi konumda olduğunu izler. *ngForTrackBy="customTrackBy" ile *ngFor nesnesini nesne kimliği yerine indeks kullanırız.

Plunker example

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