为什么在使用 ngFor 和 ngModel 时更改选择会更改其他人？

Question

我想让用户创建几个选择，选择选项并将这些选项聚合到一个数组中以发送到父组件。

我正在尝试使用循环字符串数组 (valueInputs) 的 *ngFor 来执行此操作，从而为每个元素创建一个选择。添加按钮将新的空字符串推送到valueInputs，从而增加了选择的数量。最后，每个选择都会通过ngModel 更新valueInputs 的索引。

这里有一个 Stackblitz 来展示它：https://stackblitz.com/edit/angular-q5nwjq

组件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  valueInputs = ['', '', ''];
}

模板：

<ng-container *ngFor="let valueInput of valueInputs; let i = index">
  <select
    [(ngModel)]="valueInputs[i]">
    <option value="" disabled>Select an option...</option>
    <option value="opt1">Option 1</option>
    <option value="opt2">Option 2</option>
  </select>
</ng-container>

<div>
  <button (click)="valueInputs.push('')">Add input</button>
  <p>Value Inputs: {{ valueInputs | json }}</p>
</div>

问题是：当我为第一个选择选择一个选项时，第二个选择也会改变！第二个valueInputs 索引中的实际值没有变化，只有选定的选项。

这发生在所有选择上。你改变一个，下一个也改变。

这有意义吗？或者它是Angular中的一个错误？你有什么建议可以达到同样的效果吗？

Answer 1

我编辑了你的stackblitz。要将 ngFor 与原始数据类型一起使用，您必须使用“trackBy”

两个修改：

  trackByIdx(index: number, obj: any): any {
    return index;
  }

在你的 html 中：

<ng-container *ngFor="let valueInput of valueInputs; let i = index; trackBy:trackByIdx">

也可以查看answer了解更多详情。