反復された配列充填のAngular 2入力を実装する方法は？

Question

私は、順序でアイテムを追加/削除し、それらをバックエンドに送信する配列に集約させたいと考えています。

• のCustomerName：ビリー
• 受注：[ピザ、バーガー、寿司]

が結合反復入力に入った任意のSOの答えやドキュメントを見つけることができませんデータは次のようになります。誰でもこれを試みましたか？テンプレートコード：[新規]ボタンのクリック機能を追加内側

<div> 
    <input 
    type="text" 
    name="name" 
    title="name" 
    placeholder="Customer Name" 
    [(ngModel)]="customerName"/> 
</div> 
<div *ngFor="let item of itemsInNewOrder; let i = index"> 
    <input 
    type="text" 
    name="order" 
    title="order" 
    [(ngModel)]="itemsInNewOrder[index]"/> 
</div> 

は：

...firebaseStuff... .push({name: name, order: this.itemsInNewOrder})

残念ながら、これは動作しません。前もって感謝します！ :)

編集1：（それぞれ）トリガー2つのボタンがあります。

incrementItemsInNewOrder() { 
    this.itemsInNewOrder.push("") 
} 
decrementItemsInNewOrder() { 
    this.itemsInNewOrder.pop() 
} 

Answer 1

が、私は一つの問題を見ることができます。あなたはテンプレートで宣言した変数iを使うべきです。

<div *ngFor="let item of itemsInNewOrder; let i = index"> 
    <input 
    type="text" 
    name="order" 
    title="order" 
    [(ngModel)]="itemsInNewOrder[i]"/> <------ HERE 
</div> 

EDIT

角度は、入力に入力するときに、変化検出をやっているように見える、それはあなたがフォーカスを失う発生したとき、それらを再度レンダリングします。

ですが、値をオブジェクトにラップして突然動作させると、

コンポーネント：

itemsInNewOrder = [{value: 'Soda'}, {value: 'Burger'}, {value: 'Fries'}]; 

テンプレート：

<div *ngFor="let item of itemsInNewOrder; let i = index"> 
    <input 
     type="text" 
     name="order" 
     title="order" 
     [(ngModel)]="itemsInNewOrder[i].value"/> 
    </div>