Question

这是我的模板：

[['Anna', 50.0, 90.0, 80.0],
 ['Bill', 60.0, 70.0],
 ['Cal', 98.5, 100.0, 95.5, 98.0]]

这是我的组件：

     <div *ngFor="let d of data; let i=index">
        <select [(ngModel)]="d.dob" name="dob-{{i}}">
          <option *ngFor="let d of [1990, 1991, 1992]">
            {{d}}
          </option>
        </select>
        <i class="fa fa-times" (click)="remove(i)"></i>
      </div>
      <button type="button"
          class="btn btn-primary"
          (click)="add()"
          > + </button>

由于某些原因，当我有2个选择时，然后开始删除第一个，并添加一个新值，第一个中的值（最初是第二个）消失。

似乎我应该重新触发渲染，因为模板被引用弄糊涂了。我设法通过添加

摆脱了这个问题

data: any[] = []
add(): void {
  this.data.push({dob: undefined})
}

remove(index: number): void {
  this.data.splice(index, 1)
}

在我的this.data= _.cloneDeep(this.data)函数

中

任何更简洁的方法来解决此问题？

Answer 1

动态添加或删除项目时，在* trackBy上使用ngFor选项。

<强> HTML

 <div *ngFor="let d of data; let i=index; trackBy: trackByFn">

<强>打字稿：

trackByFn(index, item) {
    return index; 
}

当迭代器的内容发生变化时，NgForOf会生成   对DOM的相应更改：

添加项目时，会将新模板实例添加到   DOM。删除项目时，将删除其模板实例   DOM。 ....否则，该项目的DOM元素将保留   相同。 Angular使用对象标识来跟踪插入和删除   在迭代器中并重现DOM中的这些更改。

要自定义默认跟踪算法，NgForOf支持trackBy   选项。 trackBy接受一个有两个参数的函数：index和   项目。如果给出了trackBy，则Angular跟踪返回值的变化   功能。

Docs

Angular4：ng对动态修改的数组感到困惑

1 个答案: