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

Question

我有一个组件＆＃39; bar＆＃39;在ngFor里面。我想用动画从前一个值开始更新它的宽度到新的宽度。

html：

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

ParentComponent：

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

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

        this.stations = data;

      });
  }

BarComponent

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。所以即使＆＃39; station.perc＆＃39;是相同的，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 也会对您有所帮助。