Angular

Question

当用户在输入框和选项卡中输入数据时，blur 事件会更新 *ngFor（1 值）中使用的基础数组。 DOM 但是显示 2 个重复值。

有关显示该问题的工作代码，请参阅 stackblitz： https://stackblitz.com/github/mpierce5/duplication-error/tree/master

Answer 1

正如@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>

有关详细信息，请参阅 here

Answer 2

很好的答案 Fartab。我只想再添加一件事，也更新 editItem 方法：

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

Angular - *ngFor 创建的输入导致在触发模糊事件时显示重复值

Angular - inputs created by *ngFor causes duplicate values to display when blur event fires

onblur

ngfor