* ngForとngModelを使用してオブジェクトの配列を塗りつぶし

Question

成分の配列に項目を追加するために、次のフォームを作成しました。 ユーザーが[新しい成分を追加]をクリックすると、空の成分がリストに追加されます。

HTML：

<button md-button 
       (click)="addIngredient()"> 
     <md-icon>add</md-icon> ADD 
     </button> 

    <div *ngFor="let ingredient of ingredients"> 
     <md-form-field floatPlaceholder="never"> 
      <input mdInput placeholder="NAME" 
       [(ngModel)]="ingredient.name" name="name"> 
     </md-form-field> 
     <md-form-field floatPlaceholder="never" style="width: 80px"> 
      <input mdInput placeholder="QUANTITY" type="number" 
       [(ngModel)]="ingredient.quantity" name="quantity"> 
     </md-form-field> 
    </div> 

TS：

addIngredient() { 
// outputs real list 
console.log(this.ingredients); 
this.ingredients.push({ 
     name: 'tt', 
     quantity: '12' 
    }); 
} 

アプリが起動し、私はリストに新しい空の成分を追加するために "追加" をクリックします。 成分の名前と量を更新してから、もう一度「追加」をクリックして別の成分を追加します。

「追加」ボタンをクリックして別の成分を追加すると、私が追加したすべての成分のフォーム入力は、addIngredient()メソッドで宣言した値に設定されます（すべての名前は 'tt' '12'）コンソールログに実際のリストが表示されます。

この問題の原因は何ですか？

Answer 1

各成分について（私が提供した一意のIDを生成するexemple関数）：

<button md-button (click)="addIngredient()"> 
    <md-icon>add</md-icon> ADD 
</button> 

<div *ngFor="let ingredient of ingredients"> 
    <md-form-field floatPlaceholder="never"> 
     <input mdInput placeholder="NAME" 
      [(ngModel)]="ingredient.name" name="name-{{ingredient.id}}"> 
    </md-form-field> 
    <md-form-field floatPlaceholder="never" style="width: 80px"> 
     <input mdInput placeholder="QUANTITY" type="number" 
      [(ngModel)]="ingredient.quantity" name="quantity-{{ingredient.id}}"> 
    </md-form-field> 
</div> 

addIngredient() { 
    this.ingredients.push({ 
     id: this.guid(), 
     name: 'tt', 
     quantity: '12' 
    }); 
} 

private guid() { 
    let uniqueId = Math.random().toString(36).substring(2) 
     + (new Date()).getTime().toString(36); 
    return uniqueId; 
} 

Answer 2

あなたは私は本当にいけない物価スライド制とngForの動作を説明する方法を知っているが、あなたは、配列のどの項目に目を維持する働きがあり、あなたのngForにインデックスを追加する必要があるかもしれません：

<button md-button 
      (click)="addIngredient()"> 
    <md-icon>add</md-icon> ADD 
    </button> 

<div *ngFor="let ingredient of ingredients; let i = index"> 
    <md-form-field floatPlaceholder="never"> 
     <input mdInput placeholder="NAME" 
      [(ngModel)]="ingredients[i].name" name="name"> 
    </md-form-field> 
    <md-form-field floatPlaceholder="never" style="width: 80px"> 
     <input mdInput placeholder="QUANTITY" type="number" 
      [(ngModel)]="ingredients[i].quantity" name="quantity"> 
    </md-form-field> 
</div> 

編集：私はこの記事に私の答えをベースあなたはngFor内入力/ ngModelを使用するときは、一意のIDを生成する必要がありますので、あなたは、各入力の属性名前のためのユニークな値を与えなければならない（Angular2 ngModel against ngFor variables）