Как выделить столбец на 500 мс при изменении данных.Необходимо выделить его зеленым / красным цветом в зависимости от того, увеличилось или уменьшилось значение с прошлого

Question

Я включил таблицу угловых материалов в свой новый проект и хочу, чтобы таблица отслеживала данные каждого столбца при его изменении. Если значение данных увеличивается, мигает столбец зеленым цветом, а если уменьшается, красным цветом, скажем, 500 мс, а затем возвращается в нормальное состояние.

Я пытался сделать это с отслеживанием последних данных в самом коде, но это не выглядит оптимизированным решением. Могут ли мне помочь в этом какая-либо директива или материальная функциональность?

HTML

<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time">
    <mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
    <mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>

<ng-container matColumnDef="valueA">
    <mat-header-cell class="text-text" *matHeaderCellDef> valueA </mat-header-cell>
    <mat-cell class="text-text" *matCellDef="let row"> {{row['valueA']}} </mat-cell>
</ng-container>

<ng-container matColumnDef="valueB">
    <mat-header-cell class="text-text" *matHeaderCellDef> valueB </mat-header-cell>
    <mat-cell class="text-text" *matCellDef="let row"> {{row['valueB']}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns" class="bg-table-odd-row"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" [ngClass]="{'bg-table-even-row': i%2 == 0, 'bg-table-odd-row': i%2 != 0}"></mat-row>

TS

import { Component, ViewEncapsulation, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material';

@Component({
  selector: 'my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.styl'],
  encapsulation: ViewEncapsulation.None
})
export class MyTableComponent {
  displayedColumns = ['time', 'valueA', 'valueB'];
  dataSource: MatTableDataSource<any>;

  private tableData: any = [];

  @Input()
  set data(value) {
    if(value) {
        this.tableData = [...value];
        this.refresh();
    }
  };

  constructor() {
    this.dataSource = new MatTableDataSource(this.tableData);
  }

  private refresh() {
    this.dataSource.data = this.tableData;
  }
}

Answer 1

Вы можете начать с установщика данных и подключить туда свою логику

@Input()
  set data(value) {
    if(value) {
        const newData=[...value];
         this.tableData = [...value];
        this.refresh();
        this.flashClass=''
        if(this.tableData.length>newData.length)
            this.flashClass='green-flash'
        if(this.tableData.length>newData.length)
            this.flashClass='red-flash'
    }
  };

применить класс к вашим html

<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time" [ngClass]="flashClass">
    <mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
    <mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>

анимациям css

.green-flash {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 0.3s;

    animation-name: flash-animation;
    animation-duration: 0.3s;
}

@keyframes flash-animation {  
    from { background: none; }
    to   { background: green; }
}