Angular2が

Question

ダイナミックテキストボックスを結合私は

console.log(textboxvalue) 

の値を収集するとき、私はそのようにテキストボックスの値とIDの両方に結合することができますどのようにこの

<ul> 
<li *ngFor="let data of list"> 
    //here bind a textbox to the id and get its value so something like 

    <input type="text" /> //am stuck 
</li> 

export class App { 
textboxvalues:any[] = []; 

list= [{ 
    id: 1, 
    value: 'One' 
    }, 
    { 
    id: 2, 
    value: 'Two' 
    }]; 
} 

を持っています{id、value}を提供します。例えば、

{1:"textbox1", 2:"textbox2"} 

あるいはオブジェクト

{1, "textbox1"}, {2, "textbox2"} 

Answer 1

としては、次を試してみました：

<li *ngFor="let data of list;"> 
     <input type="text" [(ngModel)]="data.value"/> 
    </li> 

[（ngModel）]ようにあなたがテキストボックスに値を変更すると2つの結合方法を設定します配列内のオブジェクトも同様に更新されます。 FormsModuleをインポートすることを忘れないでください。

ここにはexample on plunkerがあります。必要なものはすべてapp.tsにあります。最初のリストのテキストボックスを変更すると、読み取り専用リストも更新されます。

これが役に立ちます。

Answer 2

この作品のようなものはありますか？

<li *ngFor="let data of list"> 
    <input type="text" name={{data.id}} [(ngModel)]="data.value" /> 
</li> 

これはのform.valueその結果：あなたは1つのプロパティから読み取られ、別のものに記述する必要がある場合は、代わりにこれを試みることができる（しかし、私はそれを構文チェックしませんでした）

{ "1": "One", "2": "Two" } 

。デフォルト値を取得しないことに注意してください。変更された値にのみ設定されます。 [FormArray（https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups）反応フォーム（HTTPSの

<li *ngFor="let data of list; let i = index"> 
    <input type="text" name={{data.id}} [ngModel]="data.value" 
      (ngModelChange)="textboxvalues[i]=$event /> 
</li>