Question

我有一个席子表，在其中显示行列表。我有一个添加新按钮，用户可以通过该按钮手动添加一行。工作Stackblitz：https://stackblitz.com/edit/angular-axjzov-8zmcnp 我希望该选项突出显示新插入的行2-3秒，以便用户可以看到新创建的行。我该如何实现？

Answer 1

您可以将其添加到样式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;
    }
}

Answer 2

在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链接。

如何在Mat-Table Angle 7中突出显示新插入的行

2 个答案: