Angular 2 ngModel binden in verschachteltes ngFor

Question

Ich versuche, eine Angular 1 App in Angular 2 zu konvertieren. Looping durch eine gezackte Array von booleans (boolean[][]). Ich bin Rendern checkboxes mit dem folgenden Code:

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

Das Kontrollkästchen Anzeige richtig, aber wenn ich eine Checkbox die eine rechts davon wählen auch ausgewählt ist.

Diese Logik funktioniert in der Angular 1 App fein so nicht sicher, ob ich bin, wenn es ein Problem mit der Art und Weise, das ich ngModel oder ein Problem mit kantigem 2.

Jede Hilfe würde geschätzt viel bin mit

Answer 1

aktualisieren

Der offizielle Weg ngForTrackBy zu verwenden scheint

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

zu sein

Siehe http://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.html für weitere Details

Notiz die : in trackBy:customTrackBy

original

Sie *ngForTrackBy dafür verwenden können:

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

Angular standardmäßig verfolgt die Objektidentität aber verschiedene true s und false s haben die gleiche Identität. Ohne *ngForTrackBy Angular verliert Spur, die true oder false an welcher Position ist. Mit *ngForTrackBy="customTrackBy" machen wir *ngFor den Index anstelle der Objektidentität.

Plunker example

Siehe

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