Angular 以编程方式选择mat表格行

我的应用程序中有一个基于mat表的组件，允许用户通过单击来选择一行。基于选定的表行，代码将在相邻的扩展面板中显示有关该行的其他信息/详细信息。加载页面时，不会选择任何表行，因此“详细信息”面板为空。以编程方式选择表行（比如第一行）的最佳方法是什么

当前行选择基于调用已单击的mat行上的单击处理程序，该处理程序将属性“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>

---

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

您也可以使用

[ngClass]

或

[ngStyle]

我已经在上创建了一个演示。我希望这将对你/其他人有所帮助/指导

Component.html

---

添加正式答复：

在表上添加cdkObserveContent处理程序（这允许首先加载表）：

---

花了很长时间才找到一个有效的答案，所以要尽量简洁。在我的例子中，我通过一个http请求，也就是通过一个可观察但

在

component.html

内容

在

component.ts上

my onRowClicked看起来像

onRowClicked（行：任意）{
this.logger.debug（'--->Row单击'，Row）；
this.currentEntity=Company.fromAny（行）；
}

最后在my

ngOnInit（）中的
component.ts
中

ngOnInit（）{
//有些事情
让retrieveddata=myWebService.getSomeData（）
onRowClicked（检索数据）
}

---

因此路径是

ngOnInit=>onRowClicked=>currentEntity===row

Krishna，我已经在我的问题中包含的小代码摘录中这样做了。我希望在没有任何用户操作的情况下加载表时立即选择默认的第一行。无论如何，我现在已经弄明白了：在表上添加一个cdkObserveContent处理程序：

，并在该处理程序中调用高亮显示处理程序来高亮显示行：

tableContentChanged（）{this.zone.run（（）=>{this.highlight（this.dataSourceTable.data[0]）；}

加载表时，您可以使用0索引数据调用函数，然后选择第一个数据。this.highlight（this.dataSource.data[0]）我希望这将有助于您感谢Krishna。我就是这么做的。部分问题是确定表何时完成渲染。使用cdkObserveContent属性解决了这个问题。

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

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

<mat-table #table [dataSource]="dataSourceTable" matSort aria-label="Faults" (cdkObserveContent)="tableContentChanged()"> 

tableContentChanged() { 
   this.zone.run(() => { 
     this.highlight(this.dataSourceTable.data[0]); 
   }); 
}