如何突出显示角垫表中的第一行？

如何解决如何突出显示角垫表中的第一行？

我有一个 angular mat-table 和一个名为 table-row 的类。如果我单击该行，该样式将起作用并以红色突出显示该行。

但我想要的是默认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;
}

解决方法

您需要保留表中选定行的 selectedRowIndex。因此，当您选择每一行时，selectedRowIndex 必须更新好吗？现在只需在组件的 selectedRowIndex 中将 1 设置为 ngOnInit。

<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

,

你可以使用 CSS 来做到这一点

只需像这样为标签分配一个类：

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

然后在表格行上使用以下样式：

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

希望对你有用