2016-12-17 16 views
6

ngModelで動的変数を使用するにはどうすればよいですか?角2 - ngModelの動的変数

私は以下のコードを使用しようとしていますが、次のエラーが表示されます

<div *ngFor="let num of ['1','2','3']; let i=index"> 
    <input id="qtd{{num}}" [(ngModel)]="qtd{{num}}" type="text"/> 
</div> 

エロ

Unhandled Promise rejection: Template parse errors: Parser Error: Got interpolation ({{}})

+1

配列を使用し、 'qtd [num]'を使用します。 –

+0

例を挙げてください。 – rafaelcb21

答えて

14

コンポーネントで配列を定義し、それにプッシュし続けます。

export class AppComponent { 
    qtd:any[] = {}; 
} 

その後、QTD配列役立ちます

Plunker

希望になります。このすべての動的なモデルで

<div *ngFor="let num of ['1','2','3']; let i=index"> 
    <input id="qtd{{num}}" [(ngModel)]="qtd[num]" type="text"/> 
</div> 

{{ qtd | json}} 

のようなあなたのテンプレートを更新!

+0

非常にうまく動作します!ありがとうございました!私は数時間正しい答えを探していました!ありがとう! :) –

7

のは、次のコンポーネントを持っていると言うの

export class AppComponent { 
    qtd1 = 'qtd1'; 
    qtd2 = 'qtd2'; 
    qtd3 = 'qtd3'; 
} 

次に、あなたのテンプレートは次のようになります。

<div *ngFor="let num of ['1','2','3']; let i=index"> 
    <input id="qtd{{num}}" [(ngModel)]="this['qtd' + num]" type="text"/> 
</div> 

Plunker Example