Angular 2 - 使用 ngFor，是否可以在不重建 dom 的情况下更新值？

Question

我在 ngFor 中有一个组件“bar”。我想用动画从以前的值开始更新它的宽度到新值。

HTML :

<div *ngFor="let station of stations" class="station">
    <bar [perc]="station.perc" class="bar"></bar>
</div>

父组件:

ngOnInit(){
    setInterval(() => this.updateData(), 10000);
  }

  updateData(){
    const url = 'http://....';
    this.http.get(url)
      .map(res => res.json())
      .subscribe(data => {

        this.stations = data;

      });
  }

条形组件

export class BarComponent {

  @Input() perc;

  constructor(private element: ElementRef){}

  ngOnChanges(changes: any): void {
    let perc = changes.perc.currentValue;
    TweenMax.to(this.element.nativeElement, 1, { width: perc + '%' });
  }

}

但是在每个 updateData() 上它看起来像 ngFor 重新创建 dom 和 BarComponent 再次构造。因此，即使 'station.perc' 相同，也会触发 ngOnChanges()。

并且过渡继续从 0 重新开始，而不是从以前的值开始...

我可能在这里错过了一个关键点，但是干净的解决方法是什么？

Answer 1

我猜你应该使用 trackBy 选项来自定义 ngFor 指令的默认跟踪算法:

查看

<div *ngFor="let station of stations; let i = index; trackBy: trackByFn" class="station">
  <bar [perc]="station.perc" class="bar"></bar>
</div>

组件

trackByFn(index, item) {
  return index;
}

或者更好一点使用唯一 id:

trackByFn(index, station) {
  return station.id;
}

在此处查看有关 trackBy 的更多详细信息:

• https://angular.io/guide/template-syntax#ngfor-with-trackby

希望 Plunker Example 也会帮助你。