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

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

0 голосов
/ 12 сентября 2018

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

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

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

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

public editItem(value, index: number) {
    this.testList[index] = {"value": value};
}
0 голосов
/ 12 сентября 2018

Как сказал @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>

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

...