在 Angular Material Table 上调用 renderRows() [英] Calling renderRows() on Angular Material Table
问题描述
我正在尝试在更新表中使用的数据后刷新我的 Angular 表.
I'm trying to get my Angular Table to refresh after updating the data used in the table.
文档说您可以通过调用其 renderRows() 方法来触发对表格渲染行的更新."但它不像一个普通的子组件，我可以在其中使用@ViewChild(MatSort) sort: MatSort;"因为我不导入它.
The docs say "you can trigger an update to the table's rendered rows by calling its renderRows() method." but it is not like a normal child component where I can use something "@ViewChild(MatSort) sort: MatSort;" since I do not import it.
如果我确实导入它并尝试类似@ViewChild('myTable') myTable: MatTableModule;然后我收到一个错误，提示该类型不存在 renderRows().
If I do import it and try something like @ViewChild('myTable') myTable: MatTableModule; then I get an error that says that renderRows() does not exist on that type.
如何调用这个方法?谢谢！
How can I call this method? Thanks!
我的表格代码片段:
<mat-table #table [dataSource]="dataSource" myTable class="dataTable">
推荐答案
确保导入 ViewChild 和 MatTable:
Make sure you import ViewChild and MatTable:
import {Component, ViewChild} from '@angular/core';
import {MatTable} from '@angular/material';
然后您可以使用 ViewChild 获取对表的引用(请注意，MatTable 上需要类型 T - 我只是使用了任何类型，但是如果您有类型表，则需要使用该类型:
Then you can get a reference to the table using the ViewChild (note that a type T is required on MatTable - I just used any, but if you have a typed table, you will need to use that type:
@ViewChild(MatTable) table: MatTable<any>;
然后当您以任何方式修改表格时，您都需要调用 renderRows() 方法.
Then when you modify the table in any way you will need to call the renderRows() method.
delete(row: any): void {
/* delete logic here */
this.table.renderRows();
}
这是一个非常简单的工作示例:https://stackblitz.com/edit/angular-bxrahf
Here is a very simple working example: https://stackblitz.com/edit/angular-bxrahf
我自己解决这个问题时发现的一些来源:
Some sources I found when solving this issue myself:
这篇关于在 Angular Material Table 上调用 renderRows()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
