Angular Material Table如何根据日期远近设置行从红到绿的渐变颜色

实现逻辑 #

• 先统计所有数据中日期字段的最大时间戳（最近日期）和最小时间戳（最远日期）
• 基于当前行日期的时间戳在最小、最大时间戳区间的占比，计算红到绿的渐变RGB值
• 将计算出的颜色值绑定到mat table行的背景样式属性

步骤1：组件TS逻辑编写 #

首先处理数据源，计算日期边界、实现颜色计算方法：

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

// 你的行数据类型定义，根据实际调整
interface TableRow {
  id: number;
  name: string;
  createTime: Date; // 你的日期字段
  // 其他字段...
}

@Component({
  selector: 'app-date-color-table',
  templateUrl: './date-color-table.component.html',
  styleUrls: ['./date-color-table.component.css']
})
export class DateColorTableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'createTime'];
  dataSource = new MatTableDataSource<TableRow>();
  // 存储日期时间戳边界
  private minTimestamp: number = 0;
  private maxTimestamp: number = 0;

  ngOnInit(): void {
    // 替换成你实际的接口请求逻辑
    this.fetchTableData().subscribe(data => {
      this.dataSource.data = data;
      // 计算日期时间戳的最大最小值
      const timestamps = data.map(item => item.createTime.getTime());
      this.minTimestamp = Math.min(...timestamps);
      this.maxTimestamp = Math.max(...timestamps);
    });
  }

  // 行背景色计算方法
  getRowBgColor(row: TableRow): string {
    const currentTs = row.createTime.getTime();
    // 处理所有日期相同的边界情况
    if (this.maxTimestamp === this.minTimestamp) {
      return 'rgb(255, 0, 0)';
    }
    // 计算当前日期在区间内的占比，越接近1日期越近
    const ratio = (currentTs - this.minTimestamp) / (this.maxTimestamp - this.minTimestamp);
    const red = Math.round(255 * ratio);
    const green = Math.round(255 * (1 - ratio));
    return `rgb(${red}, ${green}, 0)`;
  }

  // 模拟接口请求，实际替换为自己的请求逻辑
  private fetchTableData() {
    // 此处省略接口请求逻辑
  }
}

步骤2：表格模板绑定行样式 #

在mat table的行定义标签上，绑定背景色属性：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 列定义，根据你的实际列调整 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="createTime">
    <th mat-header-cell *matHeaderCellDef> 创建时间 </th>
    <td mat-cell *matCellDef="let element"> {{element.createTime | date:'yyyy-MM-dd'}} </td>
  </ng-container>

  <!-- 行定义，核心是绑定style.background-color -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      [style.background-color]="getRowBgColor(row)">
  </tr>
</table>

自定义调整说明 #

• 如果需要全量数据的日期范围做渐变基准（而非当前分页数据），将minTimestamp、maxTimestamp的计算逻辑放到全量数据获取的位置即可
• 对颜色饱和度、透明度有调整需求，可以修改RGB值的计算规则，或者改成RGBA格式增加透明度参数
• 存在无效日期的场景，可以在getRowBgColor方法中增加日期有效性判断，无效日期返回默认背景色即可

内容的提问来源于stack exchange，提问作者Winssen