在Angular材质表上调用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)排序: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:
- https://material.angular.io/cdk/table/api#CdkTable
- https://stackoverflow.com/a/49121032/8508548
这篇关于在Angular材质表上调用renderRows()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
