Неправильное входное значение при использовании ngFor, ngModel и массива

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 дополнениями, которые вы сделали