Angular - входные данные, созданные * ngFor, приводят к отображению повторяющихся значений при возникновении события размытия

Question

Когда пользователь вводит данные во входные данные и вкладки, событие размытия обновляет базовый массив, используемый в * ngFor (значение 1). Однако DOM показывает 2 повторяющихся значения.

См. Stackblitz для рабочего кода, показывающего проблему: https://stackblitz.com/github/mpierce5/duplication-error/tree/master

Answer 1

Отличный ответ, Фартаб. Я бы добавил еще одну вещь, тоже обновляя метод editItem:

public editItem(value, index: number) {
    this.testList[index] = {"value": value};
}

Answer 2

Как сказал @penleychan, используйте объекты, когда вам нужно изменить элемент, который использует ngFor.Я имею в виду объявить вашу модель следующим образом:

this.testList = [
      { value: '-- placeholder --' },
      { value: '-- placeholder --' },
      { value: '-- placeholder --' },
      { value: '-- placeholder --' },
    ];

, а затем привязать к ней следующим образом:

  <input
    *ngFor="let testUnit of testList; let i = index"
    (blur)="editItem($event.target.value, i)"
    class="test-input"
    placeholder="Change Me"
    [attr.value]="testUnit.value == '-- placeholder --' ? '': testUnit.value">


  <div class="test-value-area">
    <div class="test-value-area-title">Array Values</div>
    <p *ngFor="let testUnit of testList">{{testUnit.value}}</p>
  </div>

Для получения дополнительной информации см. здесь