angular - 在 Angular Material 表上调用 renderRows()

Question

我试图在更新表中使用的数据后刷新我的 Angular 表。

文档说“您可以通过调用其 renderRows() 方法来触发对表的呈现行的更新。”但它不像普通的子组件，我可以在其中使用“@ViewChild(MatSort) sort: MatSort;”因为我不导入它。

如果我确实导入它并尝试类似@ViewChild('myTable') myTable: MatTableModule;然后我收到一条错误消息，指出 renderRows() 在该类型上不存在。

如何调用这个方法？谢谢!

我的表格代码片段:

<mat-table #table [dataSource]="dataSource" myTable class="dataTable">

Answer 1

确保导入 ViewChild 和 MatTable:

import {Component, ViewChild} from '@angular/core';
import {MatTable} from '@angular/material';

然后您可以使用 ViewChild 获取对表的引用(请注意，在 MatTable 上需要类型 T - 我只使用了任何类型，但如果您有类型表，则需要使用该类型:

@ViewChild(MatTable) table: MatTable<any>;

然后，当您以任何方式修改表格时，您都需要调用 renderRows() 方法。

delete(row: any): void {
  /* delete logic here */
  this.table.renderRows();
}

这是一个非常简单的工作示例: https://stackblitz.com/edit/angular-bxrahf

我自己解决这个问题时发现的一些资源:

• https://material.angular.io/cdk/table/api#CdkTable
• https://stackoverflow.com/a/49121032/8508548