Как выделить недавно вставленную строку в мат-таблицу угловую 7

Question

У меня есть таблица матов, где я отображаю список строк.У меня есть кнопка Добавить новую, с помощью которой пользователь может вручную добавить строку.Рабочий Stackblitz: https://stackblitz.com/edit/angular-axjzov-8zmcnp Я хочу, чтобы опция выделяла вновь вставленную строку на 2-3 секунды, чтобы пользователь мог видеть вновь созданную строку.Как мне этого добиться?

Answer 1

В 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>

Здесь - это обновленная рабочая ссылка stackBlitz.

Answer 2

Вы можете добавить это к стилю 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;
    }
}