数据更改时如何突出显示一列500ms。需要根据上次的价值是增加还是减少，将其突出显示为绿色/红色

Question

我已经在新项目中添加了角度材质表，并希望该表在更改每列时跟踪其数据。如果数据值增加，则以绿色闪烁该列，如果数据值减少，则以红色闪烁500ms，然后返回正常状态。

我已经尝试通过跟踪代码本身中的最后一个数据来做到这一点，但是它并不是一种优化的解决方案。某些指令或任何重要功能都可以帮助我吗？

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; }
}