Question

我有一个Angular Material Design表，如下所示。我想根据关系列的值向行添加某个类。使用标准的HTML表，我可以向这些行添加一个“依赖”类，如下所示：

<tr [ngClass]="{'dependent': element.relationship !== 'Primary'}"

我该如何使用我的材料表？

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

<!-- Employee Name Column -->
<ng-container matColumnDef="employeeName">
  <th mat-header-cell *matHeaderCellDef> Employee Name </th>
  <td mat-cell *matCellDef="let element"> {{element.employeeName}} </td>
</ng-container>

<!-- Relationship Column -->
<ng-container matColumnDef="relationship">
  <th mat-header-cell *matHeaderCellDef> Relationship </th>
  <td mat-cell *matCellDef="let element"> {{element.relationship}} </td>
</ng-container>

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

</table>

Answer 1

对于mat-table，无法通过html进行。相反，您可以在td或th元素上设置类。

Answer 2

尝试这样

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'dependent': element.relationship !== 'Primary'}"></tr>

在材料设计表行上使用[ngClass]

2 个答案: