如何在 mat-table angular 7 中突出显示新插入的行 [英] How to highlight a newly inserted row in mat-table angular 7
问题描述
我有一个 mat-table,用于显示行列表.我有一个添加新按钮,用户可以通过该按钮手动添加一行.工作 Stackblitz:https://stackblitz.com/edit/angular-axjzov-8zmcnp我想要突出显示新插入的行 2-3 秒的选项,以便用户可以看到新创建的行.我如何实现这一目标?
I have a mat-table where I display list of rows. I have a add new button through which user can manually add a row. Working Stackblitz: https://stackblitz.com/edit/angular-axjzov-8zmcnp I want the option to highlight the newly inserted row for 2-3 sec so that the user can see the newly created row. How do I achieve this?
推荐答案
您可以将这个添加到样式 css
You can add this to the style css
mat-row.mat-row {
animation: highlight 3s;
}
@keyframes highlight {
0% {
background: red
}
100% {
background: none;
}
}
如果您只想突出显示新行,则需要定义新行以向其添加类.
In case you only want to highlight the new rows, you need to define the new row to add a class to them.
假设类名是highlight".
So let's say the class name is "highlight".
在您添加的组件中:
export class TableFilteringExample {
//...
newRowIndex = 0;
//...
addElement() {
this.newRowIndex++;
//...
}
}
在 HTML 模板文件中:
In the HTML template file:
<!--...-->
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
[ngClass]="{'highlight': i < newRowIndex}"></mat-row>
<!--...-->
在样式文件中:
.highlight {
animation: highlight 3s;
}
@keyframes highlight {
0% {
background: red
}
100% {
background: none;
}
}
这篇关于如何在 mat-table angular 7 中突出显示新插入的行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!