Angular 2 - markieren Sie die aktualisierte Tabelle Zelle

Question

Wie kann ich Zelle in Tabelle flashen, die ihren Wert änderte?

<tr *ngFor="#product of products" (click)="onSelect(product)"> 
    <td>{{product.productName}}</td> 
    <td>{{product.price}}</td> 
</tr> 

in Komponente i haben Eingang für Produkte: @Input() products:Array<ProductModel>; und es ist ein Test-Timer in übergeordnete Komponente, die zufällige Produkt alle 3 Sekunden Preisänderung:

var timer = Observable.timer(2000, 3000); 
    timer.subscribe(t => this._changeRandomProduct()); 



private _changeRandomProduct() { 
    var productCandidate:ProductModel = this.products[randomOf(0, this.products.length)]; 
    productCandidate.price = productCandidate.price + 1; 
} 

wie kann ich Wertänderung Griff in Preis-Zelle, um css-Klasse hinzuzufügen?

Answer 1

Plunker example

Sie können den Index nur passieren und hinzufügen/entfernen eine Klasse mit einer CSS-Animation

@Component({ 
    selector: 'my-products', 
    styles: [` 
.updated { 
    animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate; 
} 
@keyframes blinker { 
    from { opacity: 1; color: red;} 
    to { opacity: 0; color: black;} 
}`], 
    template: ` 
    <tr *ngFor="let product of products; let i = index" (click)="onSelect(product)" [ngClass]="{updated: i === updatedIndex}"> 
    <td>{{product.productName}}</td> 
    <td> - </td> 
    <td>{{product.price}}</td> 
    </tr>`, 
}) 
export class MyProducts { 
    @Input() products:any[]; 
    @Input() updatedIndex:number; 
} 

verwendet (oder andere Mittel, um die geänderte Position zu identifizieren)