以编程方式选择 mat-table 行

Question

我的应用程序中有一个基于垫表的组件，允许用户通过单击来选择一行。根据所选的表行，代码会在相邻的扩展面板中显示有关该行的附加信息/详细信息。加载页面时，没有选择任何表格行 - 因此详细信息面板为空。以编程方式选择表行（比方说，第一个行）的最佳方法是什么？

当前行选择基于对被单击的 mat-row 调用单击处理程序，该处理程序将属性“selectedRowIndex”设置为 row.id 字段。这会导致该行的 ngClass 绑定到突出显示 css 类：

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

但如果我想要第一行的“默认”选择，我该如何实现呢？我认为，对于许多开发人员来说，这应该是一个相当标准的用例。

Answer 1

您也可以使用[ngClass]或[ngStyle]。

我在Stackblitz上创建了一个演示 。我希望这会对您/其他人有所帮助/指导。

组件.html

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

组件.ts

highlight(row){
    this.selectedRowIndex=row.position;
}