时间戳

首页 > 解决方案 > 如何在数据更改时突出显示一列 500 毫秒。需要根据上一个值是增加还是减少来突出显示它的绿色/红色

rxjs - 如何在数据更改时突出显示一列 500 毫秒。需要根据上一个值是增加还是减少来突出显示它的绿色/红色

问题描述

我在我的新项目中包含了角度材料表，并希望该表在每列数据发生变化时跟踪它。如果数据值增加，则以绿色闪烁列，如果减少，则以红色闪烁 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;
  }
}

标签： rxjsangular6angular-material2

解决方案

您可以从数据设置器开始并在那里挂钩您的逻辑

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

推荐阅读