Angular 2 - 突出显示更新的表格单元格 [英] Angular 2 - highlight updated table cell
本文介绍了Angular 2 - 突出显示更新的表格单元格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在改变其值的表格中闪烁单元格?
How can i flash cell in table that changed its value?
<tr *ngFor="#product of products" (click)="onSelect(product)">
<td>{{product.productName}}</td>
<td>{{product.price}}</td>
</tr>
在组件中我有产品输入:@Input() products:Array
并且父组件中有一个测试计时器,每 3 秒更改一次随机产品的价格:
in component i have input for products : @Input() products:Array<ProductModel>;
and there is a test timer in parent component that change random product`s price every 3 seconds:
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 类?
how can i handle value change in price-cell to add css class on it ?
推荐答案
您可以只传递索引(或其他方法来标识更改的项目)并添加/删除与 CSS 动画一起使用的类
You can just pass the index (or other means to identify the changed item) and add/remove a class used with a 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;
}
这篇关于Angular 2 - 突出显示更新的表格单元格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文