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

Question

我创建了以下表单，以便将项目添加到成分数组中。当用户点击“Add a new Ingredient”时，一个空的成分被添加到列表中。

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

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

当我单击“ADD”按钮添加另一种成分时，我添加的所有先前成分的表单输入都设置为我在 addIngredient() 方法中声明的值(所有名称都是显示为“tt”，数量为“12”)，尽管控制台日志显示的是真实列表。

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

Answer 1

当你在 ngFor 中使用 input/ngModel 时，你必须为每个输入的属性 name 提供唯一的值，所以你必须为每个成分生成唯一的 id (我提供了一个生成唯一 ID 的示例函数):

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