Nested ngFor mit Zwei-Wege-Datenbindung Angular2

Question

Ich versuche, eine Tabelle von Eingabefeldern mit Hilfe von verschachtelten ngFor mit Zwei-Wege-Datenbindung zu machen. Ich habe es fast erreicht, aber etwas mit Zwei-Wege-Datenbindung ist falsch und ich kann kein Problem finden.

So ist es das, was ich haben will. - Ich will in jedem Buchstaben des Wortes fähig Typ sein

ich diese Tabelle, und ich bin in der Lage in den Typ, aber wenn Ich gebe die erste Zelle ein, der gleiche Wert erscheint in der Sekunde, wenn ich den dritten Wert eintippe, erscheint auch in der vierten und fünften ... Und ich kann nicht verstehen, warum, ich schätze das Problem ist mit dieser Linie

<input maxlength="1" size='5' name="{{i}}{{j}}" [(ngModel)]="helper[i][j]" [id]="j"/> 

Könnten Sie mir bitte sagen, wie könnte ich dieses Problem beheben? Hier ist mein Plunker, es funktioniert, aber mit diesem Fehler, dass ich oben beschrieben ... My plunker is here

Answer 1

Wenn *ngFor verwenden, sollten Sie versuchen, direkt auf die Felder zu vermeiden Zugriff Sie Iterieren auf, wie mit [(ngModel)]="helper[i][j]".

Im Allgemeinen sollten Sie versuchen, bei Verwendung der Datenbindung immer mit der vollständigen Objekt- und Punktnotation zu arbeiten.

In Ihrem Fall ersetzen Sie einfach das rohe Array ['','','','',''] durch ein Array von Objekten [value: '', value: '', value: '', value: '', value: ''] und binden Sie es direkt.

<td *ngFor="let item2 of helper[i]; let j = index;"> 
    <input maxlength="1" size='5' name="{{i}}{{j}}" [(ngModel)]="item2.value" [id]="j"/> 
</td> 

Ich habe Ihre aktualisiert plunker