ngModel 双向数据绑定在 *ngFor 循环内未正确绑定答案

【问题标题】：ngModel two way databinding does not bind correctly inside a *ngFor loopngModel 双向数据绑定在 *ngFor 循环内未正确绑定
【发布时间】：2019-10-28 11:03:44
【问题描述】：

我在 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 只是一个包含角色的数组。

看起来就是这样：

因此，每次我按下“添加另一个角色”按钮时，都会添加一个新角色，其中包含角色名称和每小时工资。我的 ngModel 绑定有问题，每次我添加另一个角色时，每个输入值都会由于某种原因更改为添加到 customerRoles 数组中的最后一个元素的值。

所以如果我在上面的图片中添加另一个角色，它会是这样的：

视图中的每个输入值都会更改为最后添加的角色的值，在这种情况下，该角色包含一个空名称和一个空的小时工资。由于某种原因，角色 1 和角色 2 在添加后绑定到角色 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"/>

标签一直显示正确的值，而输入字段切换到前面提到的最后添加的元素的值。

【问题讨论】：

将您的角色名称输入和小时工资和删除按钮移动到子组件，并将 customerRole 作为 @Input() customerRole: 角色传递，如果您需要像 @Input() onDelete: 函数一样传递删除回调。现在您可以向数组中添加元素了。
stackoverflow.com/questions/40314732/… 的可能副本

标签： angular typescript ngfor angular2-ngmodel

【解决方案1】：

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

由于这部分... name='role-name' id="roleName" ...（其他部分相同）

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

【讨论】：

谢谢，就是这样。我必须让它们独一无二，例如id="roleName{{index}}"。