如何突出显示 angular mat-table 中的第一行？

Question

我有一个 angular mat-table 和一个叫做 table-row 的 class。如果我单击该行，该样式有效并以红色突出显示该行。

但我想要的是 select/highlight 默认第一行并显示原始的红色背景。我怎样才能做到这一点？

<table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="fullName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
        <td mat-cell *matCellDef="let row">{{row.fullName}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns; ; let i = index;" [MasterRouterLink]="['detail', row.id]" class="table-row"></tr>
    </table>

.table-row:focus {
  background: tomato;
  outline: none;
}

Answer 1

您需要在 table 中保留 select 行的 selectedRowIndex。所以当你 select 每一行时 selectedRowIndex 必须更新好吗？现在只需在组件的 ngOnInit 中将 selectedRowIndex 设置为 1。

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="highlight(row)" [ngClass]="{'highlightTableColor': selectedRowIndex == row.position}">
</tr>

ngOnInit(){
    this.selectedRowIndex = 1;
  }

这是工作示例： https://stackblitz.com/edit/select-mat-table-row-programatically-fwmfq2?file=app%2Ftable-basic-example.ts

Answer 2

您可以使用 CSS

只需将 class 分配给标签，如下所示：

<tr class="my-table" ...other angular stuff><td></td></tr>

然后在 table 行使用以下样式：

.my-table tr:first-child { background-color: yellow; }

希望对你有用

如何突出显示 angular mat-table 中的第一行？

How to highlight the first row in an angular mat-table?

angular

angular-material-table