Angular 2 - ngForで、domを再構築せずに値を更新することは可能ですか？

Question

私はngForの中にコンポーネント 'bar'を持っています。以前の値から新しい値に向かってアニメーションで幅を更新したい。

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が再び構築されるように見えます。したがって、 'station.perc'が同じであっても、ngOnChanges（）が起動されます。

と遷移が0から再開する代わりに、以前の値から始まる続けている...

私はおそらくここで重要なポイントを逃したがいただきました！きれいな回避策は？

ビュー

<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; 
} 

または少し良く使用：

Answer 1

は、私はあなたがデフォルトの追跡アルゴリズムにngForディレクティブをカスタマイズするtrackByオプションを使用する必要がありますね一意のID：

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

ここtrackBy詳細については、こちらをご覧ください：

• https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngfortrackby

希望Plunker Exampleもお手伝いをします。