Angular2 ngModelとngFor変数

Question

ngModelはngForの値に対して使用できませんか？ Angularはパフォーマンスの悪さから私を守っていますか？

素晴らしい作品：http://jsfiddle.net/langdonx/n5pjgev6/

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

はそれほど大きくは動作しません：http://jsfiddle.net/langdonx/n5pjgev6/1

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

例外：変数バインディング名を再割り当てすることはできません

を私はへの結合を試みました配列も同様に、どの種類の作品、bu tはフォーカスをハイジャックしても例外スロー：http://jsfiddle.net/langdonx/n5pjgev6/2/

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

例外：LifeCycle.tickが再帰的に呼ばれているが

編集：

私が使用してLifeCycle.tick問題を回避することができますより直接的なアプローチですが、ngForが物事を再描画するので、依然として焦点が盗まれています：http://jsfiddle.net/langdonx/n5pjgev6/3/

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

Answer 1

私はngForはそれらのngModelを持つ原始的な値であり、配列の要素を追跡する好きではないと思います。

ループ内のngModelを削除すると機能します。

とき、私update jsfiddleでそれはあまりにも動作します：

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

と

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

Answer 2

ソリューションは、そのインデックスでngModel内の値を参照することです。したがって[(ngModel)]="names[index]"。

*ngForは値で項目を追跡するので、これでは不十分です。値が変更されるとすぐに、古い値を追跡することはできません。したがって、インデックスを返すようにトラッキング関数を変更する必要があります。したがって、trackBy: trackByIndexです。

この問題はhereと説明されています。

ソリューション：

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