推送到阵列内部形式时失去双向绑定（Angular 2）

Question

我正在使用Angular 2构建一个基本的CRUD应用程序。其中一个表单字段是一系列成分。我有addIngredient方法将新的Ingredient推送到我的ingredients数组。一旦我单击触发此方法的按钮，双向绑定就会丢失。 查看诊断数据时，所有内容都显示正确，但数据从表单UI中丢失（请参阅下面的gif）：

相关HTML：

<div *ngFor="let ingredient of newRecipe.ingredients; let i = index; let f = first; let l = last">
  <md-input type="text" id="ingredientName" name="ingredientName" [(ngModel)]="ingredient.name" placeholder="ingredient" required></md-input>
  <md-input type="text" id="ingredientAmount" name="ingredientAmount" [(ngModel)]="ingredient.amount" placeholder="amount" required></md-input>
  <select id="ingredientMeasurement" name="ingredientMeasurement" [(ngModel)]="ingredient.measurement" required>
    <option *ngFor="let measurement of measurements" [value]="measurement">{{measurement}}</option>
  </select>
  <button md-icon-button color="primary" *ngIf="l" (click)="addIngredient()">
    <md-icon>add</md-icon>
  </button>
  <button md-icon-button color="warn" *ngIf="!f" (click)="removeIngredient(i)">
    <md-icon>remove</md-icon>
  </button>
</div>

来自班级的相关代码：

addIngredient() {
  this.newRecipe.ingredients.push(new Ingredient());
}

注意：上面引用的div会显示在form元素中。当我将div移到form之外时，一切都按预期工作。

Answer 1

这里发生的事情是<form>使用输入的name属性来同步模型＆＃39;值。在这种情况下，它基本上覆盖了[ngModel]同步。

你可以做些什么来解决这个问题：让name动态：

<div *ngFor="let ingredient of newRecipe.ingredients; let i = index;">
   <md-input type="text" name="ingredientName_{{i}}"   
    [(ngModel)]="ingredient.name" placeholder="ingredient" required>
   </md-input>
</div>

（即 name="ingredientName_{{i}}" ）

您可以在文档中详细了解相关内容：https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html

  

在标签中使用ngModel时，您还需要提供名称属性，以便可以使用该名称在父表单中注册该控件。

     

值得注意的是，在父表单的上下文中，您经常可以跳过单向或双向绑定，因为父表单会为您同步值。