Angular 使用*ngFor和ngModel填充对象数组

我创建了以下表单，以便将项目添加到一系列配料中。 当用户单击“添加新配料”时，列表中将添加一个空配料

HTML:

应用程序启动，我单击“添加”将新的空配料添加到列表中。 我更新了配料名称和数量，然后再次单击“添加”添加另一种配料

当我点击“添加”按钮添加另一种成分时，我之前添加的所有成分的表单输入都设置为我在

addIngredient（）

方法中声明的值（所有名称显示为“tt”，数量显示为“12”），尽管控制台日志显示的是真实列表

---

你知道是什么导致了这个问题吗？

你可能需要在你的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中使用input/ngModel时，您必须为每个输入的属性名称指定唯一的值，因此您必须为每个成分生成唯一的id（我提供了一个生成唯一id的示例函数）：

加上
添加元素（）{
这个，推({
id:this.guid（），
名称：“tt”，
数量：“12”
});
}
私有guid（）{
让uniqueId=Math.random（）.toString（36）.子字符串（2）
+（新日期（））.getTime（）.toString（36）；
返回唯一标识；
}

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

<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>

<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;
}