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

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>

有关更多信息，请参阅qazxsw poi

Answer 2

很棒的回答Fartab。我只会再添加一个东西，也可以更新editItem方法：

here