Angular Material的Mat-Table组件无法展示从Firebase获取的数据

问题根因 #

你从Redux拿到接口返回的事件数据后，仅将值赋值给了组件变量events，没有同步更新mat-table绑定的dataSource数据源的data属性，因此表格无法读取到最新数据，自然不会渲染内容。

修复方案 #

仅需要修改ngOnInit中Redux订阅的回调逻辑，将拿到的事件数据同步给表格数据源即可：

ngOnInit(): void {
  this.eventActions.readEvent();

  //  this.dataSource.data = this.getAvailableEvents();

  this.ngRedux.select(state => state.events).subscribe(res => {
    this.events = res.events;
    // 新增下方这行代码，将数据同步给表格数据源
    this.dataSource.data = res.events;
  })
}

补充提示 #

如果后续遇到数据更新后表格没有自动刷新的情况，可以手动调用this.dataSource._updateChangeSubscription()触发表格的变更检测，上述场景仅需新增一行赋值代码即可解决问题。

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