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>

垫子表角上的颜色单元

2 个答案: