Angular 6中MatTableDataSource无法显示数据问题求助

嘿，我一眼就看出问题所在啦！你遇到的核心问题是API数据是异步获取的，而你在ngOnInit里直接初始化weekViewDataSource的时候，this.weekView.machineTypePlannings还没被API返回的数据填充，所以数据源是空的，自然表格没内容～

问题根源 #

getTimePhasing()是调用API的异步操作，它不会立刻返回数据。你的代码执行顺序是：

1. 调用getTimePhasing()发起API请求
2. 立刻初始化weekViewDataSource = new MatTableDataSource(this.weekView.machineTypePlannings)
3. 过一会儿API才返回数据，填充this.weekView.machineTypePlannings

这时候DataSource已经初始化完成了，它不会自动感知到后续machineTypePlannings的变化，所以表格一直显示空数据。而你直接用实际列表的时候，数据是同步存在的，所以能正常显示。

修复方案 #

你需要等API数据返回后再更新DataSource，把DataSource的初始化/更新逻辑放到API请求的回调里：

修改你的.ts代码如下：

weekView : PlanningCalendarWeek = new PlanningCalendarWeek();
displayedColumnsWeek = this.buildDisplayedColumsWeek();
// 先初始化一个空的DataSource，避免报错
weekViewDataSource = new MatTableDataSource<any>([]); 

constructor(private dataService: DataService) {}

ngOnInit() {
  this.headerweekList = new Array<string>();
  this.createHeadersForWeek();
  
  // 调用API获取数据，在数据返回后更新DataSource
  this.getTimePhasing().subscribe({
    next: (responseData) => {
      // 假设这里把API返回的数据赋值给weekView的machineTypePlannings
      this.weekView.machineTypePlannings = responseData;
      // 更新DataSource的data属性，表格会自动刷新
      this.weekViewDataSource.data = this.weekView.machineTypePlannings;
      
      // 或者也可以重新实例化DataSource，效果一样
      // this.weekViewDataSource = new MatTableDataSource(this.weekView.machineTypePlannings);
    },
    error: (err) => {
      console.error('加载数据出错啦:', err);
    }
  });
}

额外提示 #

如果后续你需要更新表格数据（比如筛选、分页或者数据变化），直接修改weekViewDataSource.data属性即可，MatTable会自动检测到数据变化并刷新视图，不需要重新实例化DataSource哦～

内容的提问来源于stack exchange，提问作者Gwindorith