ngFor 中的角度绑定中断

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，但仍会发生这种情况。