文章内容
2020/11/9 17:54:12,作 者: 黄兵
mat-table 刷新数据源
最近在使用Angular Material的时候,使用mat-table修改表格,数据不同步更新。
delete($event, id, root, section, child): void {
const dialogRef = this.dialog.open(MenuDialogComponent, {
width: '20vw',
data: {id, root, section, parentId: child, state: 'delete'}
});
this.sub = dialogRef.afterClosed().subscribe(result => {
// 重新加载菜单
this.getPreviewMenu();
});
}
这里删除之后重新加载菜单表格,表格依然不会更新:
getPreviewMenu() {
this.sub = this.menu.getMenuPreview().subscribe(data => {
this.dataSource = data.result;
});
}
每次删除或者更新都会调用getPreviewMenu()
,但是表格还是没有更新。
解决方案:
首先实例化ChangeDetectorRef
:
constructor(private menu: MenuService,
private dialog: MatDialog,
private route: Router,
private changeDetectorRefs: ChangeDetectorRef) {
}
getPreviewMenu() {
this.sub = this.menu.getMenuPreview().subscribe(data => {
this.dataSource = data.result;
this.changeDetectorRefs.detectChanges();
});
}
这里使用ChangeDetectorRef
检测变化,关于ChangeDetectorRef
官方的解释是:
提供更改检测功能的基类。更改检测树收集所有要检查更改的视图。使用这些方法可以在树中添加和删除视图,启动更改检测以及将视图明确标记为脏,这意味着它们已经更改并且需要重新呈现。
参考资料:
1、Angular + Material - How to refresh a data source (mat-table)
黄兵个人博客原创。
转载请注明出处:黄兵个人博客 - mat-table 刷新数据源
评论列表