Question

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

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

您也可以使用class CoreConfig(AppConfig): name = 'core' verbose_name = _("core")或[ngClass]。

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

Component.html

[ngStyle]

Component.ts

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

Answer 2

添加正式答案：

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

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

并在该处理程序中调用Highlight处理程序以突出显示该行：

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

Answer 3

花了很长时间才能找到有效的答案，因此将尽量简洁。就我而言，我通过一个http请求，因此通过一个可观察到的但

在onclick上的行上声明一个component.html事件

<mat-row *matRowDef="let row; columns: displayedColumnsArray" (click)="onRowClicked(row)" [ngClass]="{ 'selected' : row === currentEntity }">Content</mat-row>
在<any>component.ts上，我的onRowClicked看起来像

onRowClicked(row: any) { this.logger.debug('-----> Row clicked', row); this.currentEntity = Company.fromAny(row); }
最后在我的<any>component.ts中的ngOnInit()

ngOnInit() { // Some things let retreivedData = myWebService.getSomeData() onRowClicked(retreivedData) }

因此路径为ngOnInit=>onRowClicked=>currentEntity === row

以编程方式选择垫子表行

3 个答案: