Javascript 来自mat表的颜色单元格

我有这个：

对象数组：

  users : User [];
  average = 5;


compareValue (value){
...}

我正在打印一张表格：像这样：

  <table mat-table [dataSource]="users">
    <ng-container matColumnDef="nome">
      <th mat-header-cell *matHeaderCellDef >Name</th>
      <td mat-cell *matCellDef="let element" > {{element.name}} </td>
    </ng-container>

    <ng-container matColumnDef="num_aval">
      <th mat-header-cell *matHeaderCellDef >Number of Works</th>
      <td mat-cell *matCellDef="let element"> {{element.works.length}} </td>
    </ng-container>

    <ng-container matColumnDef="comparaMedia">
        <th mat-header-cell *matHeaderCellDef >Stats</th>
        <td  *matCellDef="let element" > HELP HERE </td>
      </ng-container>


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

  </table>

名称
{{element.name}
工程数量
{{element.works.length}
统计数据
帮帮我

我想做的是：

我想从用户那里获取作品数量，与平均值进行比较（使用函数compareValue），如果值低于某个值，则将单元格涂成蓝色；如果在上面，请将单元格涂成红色。

---

我不知道怎么做。有什么帮助吗？

您可以有条件地将类添加到您的

td

中

<td mat-cell *matCellDef="let element" [class.red]="element.works.length > average"> {{element.works.length}} </td>

---

我假设如果单元格中的值高于平均值，则

compareValue

func返回true，否则返回false，所以我将使用 然后使用它来设置作品数量值单元格的背景色

<td mat-cell *matCellDef="let element" 
  [style.background-color]="compareValue(element.works.length) ? 'blue' : 'red'"> 
{{element.works.length}} 
</td>

{{element.works.length}

所以当值相等时，它仍然是蓝色的，问题中没有提到，另一件事是他想将它与平均值（而不是硬编码的5）进行比较，但我仍然认为你的答案比我的答案更简单，所以我会投它一票up@Jake11我已将代码更改为与

平均值

进行比较。我看到，即使是您也在蓝色和红色之间分配

背景色

<td mat-cell *matCellDef="let element" 
  [style.background-color]="compareValue(element.works.length) ? 'blue' : 'red'"> 
{{element.works.length}} 
</td>