Question

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

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

这是一个展示它的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以获得更多详细信息。

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

1 个答案: