文章内容

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)

2、ChangeDetectorRef


黄兵个人博客原创。

转载请注明出处:黄兵个人博客 - mat-table 刷新数据源

分享到:

发表评论

评论列表