调用API获取数据后MatTable表格为空无法显示内容是什么原因

• 接口返回的是包含status、text、body三个字段的包装对象，代码直接将完整返回值赋值给表格数据源，未提取所需的body字段内的数组，数据源结构与表格预期的Account[]类型不匹配，无法渲染内容。
• ngOnInit中打印dataSource能看到数据是浏览器控制台对引用类型的惰性加载特性导致，打印执行时异步请求尚未返回，控制台展示的是请求完成后更新的对象值，不代表赋值时数据已正确写入。

修改getAccountData方法的赋值逻辑，提取body字段作为数据源即可：

getAccountData(){
  this.accountService.getAccount().subscribe(
    data => this.dataSource.data = data.body as Account[]
  )
}

如果修改后仍然无法显示内容，可逐一检查：

• 模板中mat-table是否正确绑定了[dataSource]="dataSource"
• 模板中列的matColumnDef属性值和displayedColumns数组中定义的字段完全一致，且单元格正确绑定对应字段，例如{{element.name}}
• 若组件使用了ChangeDetectionStrategy.OnPush变更检测策略，需要在赋值后手动触发变更检测：

// 先导入并注入ChangeDetectorRef
constructor(private accountService:AccountService, private cdr: ChangeDetectorRef) { }

getAccountData(){
  this.accountService.getAccount().subscribe(
    data => {
      this.dataSource.data = data.body as Account[];
      this.cdr.detectChanges();
    }
  )
}

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