html - 突出显示 Angular 材料表中的特定行

Question

我有一个角材料表：

  <ng-container matColumnDef="index">
    <th mat-header-cell *matHeaderCellDef>Index</th>
    <td mat-cell *matCellDef="let element"> {{element.index}} </td>
  </ng-container>

  <ng-container matColumnDef="time">
    <th mat-header-cell *matHeaderCellDef>Time</th>
    <td mat-cell *matCellDef="let element"> {{element.Time}} </td>
  </ng-container>

  <ng-container *ngFor="let quantity of quantities" >
    <ng-container [matColumnDef]="quantity.name">
      <th mat-header-cell *matHeaderCellDef>{{quantity.name}}</th>
      <td mat-cell *matCellDef="let element"> {{element[quantity.name]}} </td>
    </ng-container>
  </ng-container>


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

当我单击屏幕上的按钮时，我想突出显示特定的行。我试图在网上找到解决方案，但没有找到任何方法。如果可能的话？

非常感谢您的帮助，祝您有美好的一天，

阿米特。

标签： htmlangulartypescripthtml-tableangular-material

Answer 1

做这样的事情：

<tr mat-row *matRowDef="let row; columns: columns;" [class.highlight]="row.field===specificLine"></tr>

在组件的样式中：

tr.highlight { background-color: red; }