Question

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

我在表（垫表）中有一个日期字段，我希望最接近日期的行在最远日期时从红到绿。

Answer 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

角材料表更改行颜色

1 个答案: