即使列表引用发生变化,如何重用ngFor的元素？

Question

我有一个Angular 2组件,用于*ngFor渲染嵌套的数字数组.

@Component({
  selector: 'app',
  template: `
    <div *ngFor="let row in data">
      <div *ngFor="let curve in row">
        <chart [data]="curve">
      </div>
    </div>
  `,
  directives: [Chart],
})
export default class App {
  data: number[][][];
}

当我改变时data,<chart>即使新数组具有相同的尺寸,Angular 也会替换元素.我只想更新图表的属性但保留元素(以便我可以设置数据变化的动画).

可以理解,Angular会替换元素,因为新数组是一个新的对象引用.但我怎么能绕过这个呢？

Answer 1

使用ngForTrackBy应该可以帮到你.

以下函数应更新元素属性,同时保留DOM中的元素.

trackByIndex(index: number, data: any) { return index; }