我有一个mat-table,我在其中显示行列表。我有一个添加新按钮,用户可以通过该按钮手动添加一行。使用Stackblitz:https://stackblitz.com/edit/angular-axjzov-8zmcnp我希望选项突出显示新插入的行2-3秒,以便用户可以看到新创建的行。我该如何实现这一目标?
您可以将其添加到样式css中
mat-row.mat-row {
animation: highlight 3s;
}
@keyframes highlight {
0% {
background: red
}
100% {
background: none;
}
}
如果您只想突出显示新行,则需要定义新行以向其添加类。
所以我们假设班级名称是“突出显示”。
在您添加的组件中:
export class TableFilteringExample {
//...
newRowIndex = 0;
//...
addElement() {
this.newRowIndex++;
//...
}
}
在HTML模板文件中:
<!--...-->
<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;
}
}
在table-filtering-example.css
我添加了以下课程
.highlight{
background: green;
}
在table-filtering-example.ts
中我添加了以下变量selectedRowIndex: number = -1;
当addElement()
被调用时,我使用ELEMENT_DATA
运算符增加了filter
的每个行条目的位置值。
之后我将selectedRowIndex
变量设置为1并添加3秒的时间间隔事件,将其重置为-1。
在table-filtering-example.html
我编辑了以下代码
<mat-row *matRowDef="let row; columns: displayedColumns;"
[ngClass]="{'highlight':selectedRowIndex == row.position}"
></mat-row>
Here是更新的工作stackBlitz链接。