2015-10-26 36 views
20

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

素晴らしい作品: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> 
+0

http://teropa.info/blog/2015/06/09/transclusion.htmlトランスクルースコープのライフサイクルを管理し、繰り返し要素トランスクルーとレンダリングについての段落を読んでください。あなたに少しの洞察力を与えるかもしれません – cjds

+2

遅いベータ版から 'ngModel'を' ngFor'で動作させる 'trackBy'があります。http:// stackoverflowを参照してください。com/questions/36469710/angular-2-ngmodel-bind-in-nested-ngfor –

+1

@GünterZöchbauerあなたは新しい回答のためにこれを複製としてマークしてしまいます。 – Langdon

答えて

16

私は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> 
+0

私は同じ問題を抱えていました。私は自分の価値の周りにラッパーを使って解決しました。しかし、私に聞かせてください:これは角度2のバグか "機能"ですか?なぜこれが起こっているのかよく分かりません。 – AstrOne

+2

バグではありません。文字列はプリミティブなので、参照アドレスはなく、ng2はその値をループ内で識別します(ngFor)。次にngModelはこの値を変更したい - >例外 – bertrandg

+0

試していないが、ng1とほとんど同じように動作すると思う。 – bertrandg

7

ソリューションは、そのインデックスで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; 
    } 
} 
関連する問題