Question

我使用ngFor创建输入，然后当我键入一个值时，当前输入和后一个输入都会获得键入的值。

<div *ngFor="let val of selectionValues; index as valIndex">
  <input matInput [(ngModel)]="selectionValues[valIndex]" />
  <button mat-button color="primary" (click)="removeSelectionValue(valIndex)">remove</button>
</div>

期望的输入值为：

（1）（空白）（空白）

然后

（1）（2）（空白）

但这是我输入时得到的：

（1）（1）（空白）

然后

（1）（2）（2）

稍后，我发现输入时输入会失去焦点。

Answer 1

所以我不得不在trackBy中使用ngFor

引用URL：https://stackoverflow.com/a/50139592/1922314

<div *ngFor="let val of selectionValues; index as valIndex; trackBy: trackByFn">
  <input matInput [(ngModel)]="selectionValues[valIndex]" />
  <button mat-button color="primary" (click)="removeSelectionValue(valIndex)">remove</button>
</div>

trackByFn(index, item) {
  return index;
}

Answer 2

只需在stackblitz上创建一个快速工作的解决方案。您可能想尝试一下 https://stackblitz.com/edit/angular-wztqj3

如果您仍然遇到问题，请分享您基于ts所做的补充

使用ngFor和ngModel以及数组时输入值错误

2 个答案: