Цветная ячейка из матового стола угловая

Question

У меня есть это:

Массив объектов:

  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>

Что я хочу сделатьвыглядит следующим образом:

Я хочу получить количество работ от пользователя, сравнить со средним значением (с помощью функции compareValue ) и , если значение ниже некоторого значениязакрасьте ячейку синим цветом;если он выше, закрасьте ячейку красным.

Я понятия не имею, как это сделать.Некоторая помощь?

Answer 1

Вы можете условно добавить класс к вашему td как

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

И добавьте стили к вашему компоненту как

td {
    background-color: blue; /* the default color is blue for the cells */
}

td.red {
    background-color: red; /* more specific style to override color to red */
}

Answer 2

Я полагаю, compareValue func возвращает true, если значение в ячейке выше среднего, и false, если это не так, поэтому я бы использовал и чем использовать его для установки цвета фона для ячейки значения количества работ

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