以编程方式选择 mat-table 行答案

【问题标题】：select mat-table row programmatically以编程方式选择 mat-table 行
【发布时间】：2018-08-18 00:30:08
【问题描述】：

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

当前行选择基于在被单击的 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>

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

【问题讨论】：

标签： angular angular-material

【解决方案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;
}

【讨论】：

克里希纳，我已经在我的问题中包含的小代码摘录中这样做了。我希望在表格加载后立即默认选择第一行，而无需任何用户操作。无论如何，我现在已经弄清楚了：在表上添加一个 cdkObserveContent 处理程序：<mat-table #table [dataSource]="dataSourceTable" matSort aria-label="Faults" (cdkObserveContent)="tableContentChanged()"> 并在该处理程序中调用突出显示处理程序以突出显示该行：tableContentChanged() { this.zone.run(() => { this.highlight(this.dataSourceTable.data[0]); }); }
当表加载时，您可以使用 0 索引数据调用函数，然后也选择第一个数据。
this.highlight(this.dataSource.data[0])
希望对您有所帮助
感谢克里希纳。这就是我所做的。部分问题是确定表格何时完成渲染。使用 cdkObserveContent 属性解决了这个问题。

【解决方案2】：

添加正式答案：

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

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

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

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

【讨论】：

【解决方案3】：

花了很长时间才找到一个可行的答案，所以会尽量简洁。就我而言，我通过一个 http 请求，所以通过一个可观察但

在 component.html 的 mat-row 上声明一个 onclick 事件

<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

【讨论】：