Question

我正在尝试对数据进行更新操作后刷新mat-table视图。但是，表视图仅在我第一次进行更新时才正确刷新。每次后续更新操作都会延迟1次，例如：

更新第1行->没有任何反应
更新第2行->第1行得到更新
更新第3行->第2行得到更新

以此类推...

使用http.get服务加载表以获取数据。更新操作调用http.post服务以保存数据，然后调用refreshData()方法。两种服务均按预期工作。

我正在使用ChangeDetectorRef来强制进行更改检测。

组件：

dataSource: MatTableDataSource<IRegion> = new MatTableDataSource();

@ViewChild(MatSort) set content(sort: MatSort) {
    this.dataSource.sort = sort;
};

constructor(private regionService: RegionService, private changeDetectorRefs: ChangeDetectorRef) {}

ngOnInit() {
    this.populateRegions();
}

refreshData(){
    this.populateRegions();
}

populateRegions(){
    this.regionService.getRegions().subscribe({
        next: regions => {
            this.dataSource.data = regions;
            this.changeDetectorRefs.detectChanges();
        }
    });
}

我在这里做什么错了？

Answer 1

在RenderRows()的引用上使用mat-table方法：

@ViewChild(MatTable, {static: false}) table : MatTable
this.table.renderRows()

或重新创建数据源对象：

populateRegions(){
    this.regionService.getRegions().subscribe({
        next: regions => {
            this.dataSource = new MatTableDataSource(regions);
            this.changeDetectorRefs.detectChanges();
        }
    });
}

MatTable更新时未刷新

1 个答案: