ngModel 双向数据绑定在 *ngFor 循环内无法正确绑定

Question

我在 ngForm 中有以下 html：

<div class="form-group form-group-flex" *ngFor="let customerRole of customerRoles; let i = index">
    <div class="role-name">
      <label for="roleName">Rolename{{i + 1}}</label>
      <input type="text" class="form-control" name='role-name' id="roleName" [(ngModel)]="customerRole.name"/>
    </div>
    <div class="hourly-wage"> // can ignore this div, works similary as role-name above
      <label for="hourlyWage">Hourly wage</label>
      <div class="input-group">
        <input type="number" class="form-control" name='hourlyWage' id="hourlyWage"
               [(ngModel)]="customerRole.hourlyWage"/>
        <div class="input-group-append">
          <span class="input-group-text ignore-radius">€</span>
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-dark btn-sm" id="deleteRole" (click)="deleteRole(customerRole)" ngbTooltip="Delete role">
      <i class="fa fa-trash" aria-hidden="true"></i>
    </button>
  </div>
  <div class="row">
    <a class="add-role-icon">
      <i class="fa fa-plus" (click)="addRole()" placement="top" ngbTooltip="Add role"></i>
    </a>
    <label *ngIf="customerRoles.length === 0; else addMoreRoles">Add role</label>
    <ng-template #addMoreRoles>
      <label>Add another role</label>
    </ng-template>
  </div>
</div>

addRole() 方法如下所示：

    addRole() {
    this.customerRoles.push(createInitialRole());
  }

customerRoles 只是一个包含角色的数组。

这就是它的样子：

所以总是有一个新角色，包含一个角色名和一个小时工资，每次我按下 "add another role" 按钮时都会添加进来。我的 ngModel 绑定有问题，每次我添加另一个角色时，由于某种原因，每个输入值都会更改为添加到 customerRoles 数组的最后一个元素的值。

所以如果我在上面的图像中添加另一个角色，它看起来像这样：

视图中的每个输入值都更改为最后添加的角色的值，在本例中包含空名称和空小时工资。出于某种原因，角色 1 和 2 在添加角色 3 后绑定到角色 3 的值。 customerRoles 数组包含正确的元素。例如，它仍然包含第 0 个索引处的初级软件开发人员角色。为什么它突然显示数组的最新添加值而不是它绑定的值？如果我使用

value="{{customerRole.name}}"
(input)="customerRole.name= $event.target.value"

而不是

[(ngModel)]="customerRole.name"

一切都按预期工作，但这是我不想采用的解决方法。

编辑：

只是为了测试目的，如果我在输入字段上方的标签中显示 customerRole.name 像这样

<label for="roleName">{{customerRole.name}}</label>
<input type="text" class="form-control" name='role-name' id="roleName" [(ngModel)]="customerRole.name"/>

标签保持显示正确的值，而输入字段切换到如前所述添加的最后一个元素的值。

Answer 1

ngFor 生成的 HTML 将不正确，因为所有 roleName 输入都具有相同的 name 和 id。我认为这可能会导致 ngFor 出现异常。

由于这部分... name='role-name' id="roleName" ...（其他部分也一样）

删除名称和 ID（或使它们在每次迭代中都是唯一的），所有这些都应该再次起作用

ngModel 双向数据绑定在 *ngFor 循环内无法正确绑定

ngModel two way databinding does not bind correctly inside a *ngFor loop

angular

typescript

ngfor

angular2-ngmodel