Açısal 2 - ngFor ile, dom yeniden inşa etmeden değerleri güncellemek mümkün mü?

Question

ngFor içinde 'bar' bileşenim var. Genişliğini, önceki değerden yeni olana kadar animasyonla güncellemek istiyorum.

html:

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

ParentComponent:

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 + '%' }); 
    } 

} 

Fakat her UpdateData üzerinde (

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

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

     this.stations = data; 

     }); 
    } 

BarComponent) ngFor dom yeniden oluşturur ve BarComponent tekrar inşa edilmiştir gibi görünüyor. Yani 'station.perc' aynı olsa bile, ngOnChanges() tetiklenir.

Ve geçiş 0'dan yeniden başlatmayı yerine önceki değerden başlayarak devam ediyor ...

Muhtemelen burada çok önemli bir noktayı kaçırmak ama neyin temiz geçici çözüm?

görünümü

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

bileşen

trackByFn(index, item) { 
    return index; 
} 

veya biraz daha iyi kullanım:

Answer 1

Ben varsayılan izleme algoritmasını ngFor direktifini özelleştirmek için trackBy seçeneğini kullanmalıdır tahmin benzersiz kimlik:

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

burada trackBy hakkında daha fazla ayrıntı bakınız:

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

Umut da size yardımcı olacaktır Plunker Example.