html - 根据数值字段（列）的值，用不同的颜色阴影（每行 - 一个阴影）为 Angular 8 中的 mat-table 行着色

Question

我正在使用 mat-table，其中每一行我有两列 - “内容”和“分数”。这个想法是根据它们的降序（或升序）分数为所有行以相同颜色的不同深浅着色。

例如看起来像这样的东西 -

我试图通过编写一个基于“分数”计算一些颜色的方法，在我希望阴影出现的行的特定单元格上添加样式。

HTML 文件（分数列）

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

            <!-- Search_content Column -->

            <!-- Score Column -->
            <ng-container matColumnDef="score">
              <th mat-header-cell *matHeaderCellDef mat-sort-header class="col3"> Score </th>
              <td mat-cell *matCellDef="let element;let i= index;" [style.background-color]="getB(element.score )"> {{element.score}}</td>
            </ng-container>           


            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index;"></tr>
          </table>

然后在 Typescript 文件中，我有一个返回颜色代码的方法-

  getB(score: number): string {

    let normScore = score / this.topScore;

    let colorNum = 0;
    colorNum = normScore*100;
    let startStyle = 'hsl(35,40%,';
    let endStyle = '%)';



    let style = startStyle+ colorNum+ endStyle;
    //ex - hsl(35, 40%, 45%) 
    return style;


    }

这工作正常。

但是，我想知道 - 是否有任何 Angular 材质功能已经做到了这一点，或者任何其他更简单的方法来为行着色不同的阴影，也许是任何 CSS 技巧或一些这样做的包。

谢谢你

标签： htmlcssangulartypescriptangular-material