Angular2 ngModel gegen ngFor Variablen

Question

Ist es nicht möglich (oder noch nicht möglich) von ngForngModel gegen Werte zu benutzen? Versucht Angular, mich vor schlechten Leistungen zu schützen?

Arbeiten groß: http://jsfiddle.net/langdonx/n5pjgev6/

<input type="text" [(ng-model)]="value">{{value}} 

nicht mehr so ​​große Arbeit: http://jsfiddle.net/langdonx/n5pjgev6/1

<li *ng-for="#name of names"> 
    <input type="text" [(ng-model)]="name">{{name}} 
</li> 

AUSNAHME: Es kann keine variable Bindung Namen

Ich habe versucht, die Bindung an die neu zuweisen Array auch, die ... Art von Arbeiten, bu t hijacks Fokus und wirft auch eine Ausnahme: http://jsfiddle.net/langdonx/n5pjgev6/2/

<li *ng-for="#name of names; #i = index"> 
    <input type="text" [(ng-model)]="names[i]">{{name}} 
</li> 

AUSNAHME: LifeCycle.tick genannt wird rekursiv

Edit:

Ich kann rund um die LifeCycle.tick Problem bekommen ein mit direkterer Ansatz, aber der Fokus gestohlen wird nach wie vor, weil ngFor Dinge neu gezeichnet: http://jsfiddle.net/langdonx/n5pjgev6/3/

012.351.

Answer 1

Ich glaube, ngFor nicht mögen Arrayelemente verfolgen, die primitive Werte sind ngModel auf ihnen.

Wenn Sie die ngModel innerhalb der Schleife zu entfernen, es funktioniert.

Es funktioniert auch, wenn ich update jsfiddle mit:

this.names = [{name: 'John'}, {name: 'Joe'}, {name: 'Jeff'}, {name: 'Jorge'}]; 

und

<li *ng-for="#n of names"><input type="text" [(ng-model)]="n.name">{{n.name}}</li> 

Answer 2

Eine Lösung ist es, den Wert innerhalb ngModel durch seinen Index zu verweisen. Daher [(ngModel)]="names[index]".

Aber dies ist nicht ausreichend, da *ngFor Spuren Elemente von Wert. Sobald der Wert geändert wird, kann der alte Wert nicht mehr verfolgt werden. Also müssen wir die Tracking-Funktion ändern, um einen Index zurückzugeben, also trackBy: trackByIndex.

Dieses Problem wird erklärt here.

Lösung:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input type="text" 
     *ngFor="let name of names; let nameIndex = index; trackBy: trackByIndex" 
     [(ngModel)]="names[nameIndex]"/> 
     <br/> 
     {{ names | json }} 
    </div> 
    `, 
}) 
export class App { 

    names: string[]; 

    constructor() { 
    this.names = ['a', 'b', 'c']; 
    } 

    public trackByIndex(index: number, item) { 
    return index; 
    } 
}