Question

我正在尝试将输入字段值绑定到列表成员。我使用ngFor为每个成员创建输入字段。问题是当我将新成员推送到列表时，模板上的所有输入字段都变为空。双向绑定仍然存在，因为当我更改字段值时，列表中的成员值也会更改。我需要的是在将新成员推送到列表时将成员值保留在模板输入字段中的方法。这是我的HTML代码：

<form action="submit">
  <div *ngFor="let member of MyList; let i = index">
    <label for="name"> Name:
      <input type="text" name='name'  [(ngModel)] ='MyList[i].name'></label>
  </div>
</form>
<button (click)="addMember()">add parameter</button>

AddMember函数只是将新成员推送到列表末尾，因此模板也会更改并添加新字段。一切都在开头找到，但只要我将一个新成员推送到列表中，所有前面的字段都变为空，尽管这些成员的名称值不是空白。

Answer 1

由于您使用的是表单，因此每个name必须是唯一的，才能作为单独的表单字段进行评估。您可以使用索引：

<input type="text" name='name{{i}}'  [(ngModel)] ='MyList[i].name'></label>

除非您这样做，否则无论何时推送一个新的空字段，所有字段都将变为空，因为它们被评估为相同的字段。尽管您使用ngModel，但仍会发生这种情况。

ngFor中的角度绑定中断

1 个答案: