角材料表改变行颜色答案

【问题标题】：Angular material table change row color角材料表改变行颜色
【发布时间】：2021-09-19 04:57:00
【问题描述】：

我想知道是否可以根据日期顺序更改行颜色，

我在表（mat 表）中有一个字段，它是一个日期，我希望日期最近的行在最远的日期为红色直到绿色。

【问题讨论】：

出于类似的需求，我最终编写了一个自定义指令。但我认为您可能必须在数据模型之外进行数学运算并在模型中添加一个指标，然后指令将只是在 X = 1 或其他情况下突出显示颜色。我没有为 mat-table 这样做，但我“认为”它基本上是一样的。
看起来很简单。您应该能够根据日期范围内的位置设置背景颜色

标签： html css angular typescript angular-material

【解决方案1】：

this SO 你知道如何混合两种颜色。所以如果你定义了一个函数

  blendColors(colorA:string, colorB:string, amount:number) {
    const [rA, gA, bA] = (colorA.match(/\w\w/g) || []).map((c) => parseInt(c, 16));
    const [rB, gB, bB] = (colorB.match(/\w\w/g) || []).map((c) => parseInt(c, 16));
    const r = Math.round(rA + (rB - rA) * amount).toString(16).padStart(2, '0');
    const g = Math.round(gA + (gB - gA) * amount).toString(16).padStart(2, '0');
    const b = Math.round(bA + (bB - bA) * amount).toString(16).padStart(2, '0');
    return '#' + r + g + b;
  }

你可以在<tr mat-row>中使用[style.background-color]

  <tr mat-row 
    [style.background-color]="blendColors('#FF0000','#00FF00',i/dataSource.length)"
      *matRowDef="let row; let i=index; columns: displayedColumns;">
  </tr>

好吧，这将背景从上到下从红色变为绿色，真的，我不太确定你想说“最接近日期的行是最远日期的红色直到绿色”，而是 i/dataSource .length 你可以使用从 0 到 1 的另一个属性

见stackblitz

【讨论】：

感谢您的回复，这确实有助于冷却器现在需要数学来对日期进行排序