Angular 2 - 突出显示已更新的 table 单元格

Question

如何刷新 table 中更改了其值的单元格？

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

在组件中我输入了产品：@Input() products:Array<ProductModel>; 父组件中有一个测试计时器，每 3 秒更改一次随机产品的价格：

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

我如何处理价格单元格中的值变化以在其上添加 css class？

Answer 1

Plunker example

您可以只传递索引（或其他方式来识别更改的项目）和 add/remove 与 CSS 动画一起使用的 class

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

Angular 2 - 突出显示已更新的 table 单元格

Angular 2 - highlight updated table cell

angular2-directives

angular