我如何在表中更改其值的Flash单元格？
<tr *ngFor="#product of products" (click)="onSelect(product)">
<td>{{product.productName}}</td>
<td>{{product.price}}</td>
</tr>
在组件中，我输入了product：@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;
}
我该如何处理price-cell中的值更改以在其上添加css类？
您可以只传递索引（或其他方法来标识更改的项目）并添加/删除与CSS动画一起使用的类。
@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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句