html - 如何在 mat-table angular 7 中突出显示新插入的行
问题描述
我有一个垫表,我在其中显示行列表。我有一个添加新按钮,用户可以通过该按钮手动添加一行。工作 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;
}
}
如果您只想突出显示新行,则需要定义新行以向它们添加类。
所以假设类名是“highlight”。
在您添加的组件中:
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;
}
}
推荐阅读
- java - 如何使用标点符号从状态存储中删除旧记录?(卡夫卡)
- php - unlink 在 DOMDocument 打开的文档上返回错误
- prometheus - Prometheus 和 Alertmanager 中是否可以有动态 groupBy?
- c# - Identity Server 4 在从 UI 进行身份验证后添加声明
- javascript - 可缩放元素专注于主页滚动
- performance - 分支错误预测在哈希表查找性能中起什么作用?
- c++ - 如何为“警告”和“错误”设置不同的 NetBeans IDE 输出链接颜色
- android-studio - Android Studio 中的 Gradle 升级
- python - 尝试使用 javascript 将 python 字典呈现为 django 模板
- spring-boot - 嵌入式 Tomcat 10 不在 Spring Boot 应用程序中侦听端口