如何在Mat-Table Angle 7中突出显示新插入的行 [英] How to highlight a newly inserted row in mat-table angular 7

问题描述

我有一个席子表，在其中显示行列表. 我有一个添加新按钮，用户可以通过该按钮手动添加一行. 工作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 Angle 7中突出显示新插入的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！