Angular Material Table调用API获取数据后不渲染表格行问题

问题根因 #

你使用的OData接口开启$count=true参数后，返回的响应不是直接的公告数组，而是嵌套结构，实际的数据集存放在value字段中，你直接把完整响应对象传给MatTableDataSource，无法识别到有效数组数据，因此不渲染行。

验证方法 #

取消notices.component.html中pre标签的注释，查看输出的JSON结构：如果数组数据包裹在value字段内，即可确认是该问题。

修复代码 #

修改notices.component.ts中getNotices方法的订阅逻辑，取value字段作为数组源：

public getNotices(table: string, params: string) {
  this.OData.getObjectWithParams(table, params)
    .subscribe( data =>  {
      // 取OData返回的value字段作为实际数组
      this.notices = data.value;
      // 可选：同步返回的总条数到分页变量
      this.pageLength = data['@odata.count'];
      this.dataSource = new MatTableDataSource<INotice>(this.notices);
    }); 
}

其他可选排查点 #

• 确认INotice接口定义的字段名、大小写与接口返回的字段完全一致，例如避免接口返回小驼峰releaseDate但代码写大驼峰ReleaseDate的问题
• 如果组件使用了ChangeDetectionStrategy.OnPush变更检测策略，需要在赋值后手动触发变更：
  1. 构造函数注入ChangeDetectorRef
  2. 赋值dataSource后调用this.cdr.detectChanges()
• 也可以提前初始化MatTableDataSource，后续直接修改data属性避免重复实例化：

  // 初始化时直接实例化
  dataSource = new MatTableDataSource<INotice>();
  
  // 赋值时直接修改data属性
  this.dataSource.data = this.notices;
  

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