关于angular：以编程方式选择垫表行


select mat-table row programmatically

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

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

1
2
<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]。

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

Component.html

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

Component.ts

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

相关讨论

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

  • 在 component.html

    上的 mat-row 上声明一个 onclick 事件

    1
    2
    3
    <mat-row *matRowDef="let row; columns: displayedColumnsArray"
      (click)="onRowClicked(row)"
      [ngClass]="{ 'selected' : row === currentEntity }">Content</mat-row>

  • 在 component.ts 我的 onRowClicked 看起来像

    1
    2
    3
    4
    onRowClicked(row: any) {
        this.logger.debug('-----> Row clicked', row);
        this.currentEntity = Company.fromAny(row);
    }

  • 终于在 component.ts 我的 ngOnInit()

    1
    2
    3
    4
    5
    ngOnInit() {
        // Some things
        let retreivedData = myWebService.getSomeData()
        onRowClicked(retreivedData)
    }

    • 所以路径是ngOnInit=>onRowClicked=>currentEntity === row

    添加正式答案：

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

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

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

    1
    2
    3
    4
    5
    tableContentChanged() {
       this.zone.run(() => {
         this.highlight(this.dataSourceTable.data[0]);
       });
    }