Question

我创建了以下表单，以便将项目添加到成分数组中。当用户点击＆＃34;添加新的成分＆＃34;，将空成分添加到列表中。

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

应用程序启动，然后点击＆＃34;添加＆＃34;将新的空成分添加到列表中。我更新了配料名称和数量，然后点击＆＃34;添加＆＃34;再添加另一种成分。

当我点击＆＃34; ADD＆＃34;按钮添加另一个成分，我添加的所有先前成分的表单输入设置为我在addIngredient()方法中声明的值（所有名称显示为＆＃39; tt＆＃39;并且数量为＆＃ 39; 12＆＃39;）虽然控制台日志显示真实列表。

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

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

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>

编辑：我的回答是基于这篇文章（Angular2 ngModel against ngFor variables）

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

2 个答案: