mat-table设置DataSource后值未正常显示问题

问题现象 #

为mat-table配置数据源时，控制台打印相关取值输出为Object对象，对应数据未在mat-table中正常展示。

原有业务代码 #

this.orderPicked = 'Orders Picked';
this._httpservice.getOrderList().subscribe((response: any) => {
  this.orderList = response.content;
  Object.entries(response.content).forEach(([key, value]) => {
    this.ordersMap.set(key, value as Array<String>);
  });
  this.ordersMap.get( this.orderPicked).map(value => {
    this.availableOrdersDatasource = [value];
  });
}, error => {
  this.errorDetails = error;
});

原代码逻辑 #

• 调用_httpservice的getOrderList接口获取订单列表数据
• 将返回体中content字段的内容遍历存入ordersMap集合
• 尝试取出key为Orders Picked对应的值，赋值给mat-table的availableOrdersDatasource数据源
• 最终表格未渲染出对应数据

问题根因 #

1. 赋值逻辑错误：ordersMap.get(this.orderPicked)取到的本身就是目标订单数组，代码里对这个数组调用map遍历，每次循环都把availableOrdersDatasource覆盖为仅包含当前遍历元素的单元素数组，最终数据源只会保留最后一条遍历到的数据，甚至如果遍历逻辑异常会直接赋值为非数组结构。
2. 数据源格式不符合mat-table要求：mat-table仅接受普通数据数组、MatTableDataSource实例作为合法数据源，直接嵌套赋值Object对象会导致表格无法识别数据行。
3. 缺少类型校验：代码中直接用类型断言把value标注为Array<String>，没有做实际的格式校验，如果接口返回对应字段不是数组格式，会直接导致运行时异常。

修复方案 #

1. 优先使用官方推荐的MatTableDataSource实例作为表格数据源，避免变更检测不触发导致的渲染失败
2. 去掉无意义的遍历覆盖赋值逻辑，直接从map中取出目标数组赋值给数据源
3. 增加格式校验，避免非数组数据传入数据源

修复后代码 #

// 组件类顶部引入MatTableDataSource
import { MatTableDataSource } from '@angular/material/table';

// 组件内初始化数据源
availableOrdersDatasource = new MatTableDataSource<any>();
orderPicked = 'Orders Picked';
// 初始化ordersMap，明确存储值类型为数组
ordersMap = new Map<string, any[]>();

// 接口请求逻辑
this._httpservice.getOrderList().subscribe({
  next: (response: any) => {
    this.orderList = response.content;
    Object.entries(response.content).forEach(([key, value]) => {
      // 校验值为数组时才存入map
      if (Array.isArray(value)) {
        this.ordersMap.set(key, value);
      }
    });
    // 直接取出对应key的订单数组，不存在则默认空数组
    const targetOrderList = this.ordersMap.get(this.orderPicked) ?? [];
    // 给数据源的data属性赋值，自动触发表格渲染更新
    this.availableOrdersDatasource.data = targetOrderList;
  },
  error: (error) => {
    this.errorDetails = error;
  }
});

额外排查点 #

• 检查模板中mat-table标签的[dataSource]属性绑定的变量名是否与组件内变量名完全一致，避免拼写错误
• 检查表格列定义的matColumnDef值是否和返回数据的字段名完全匹配，字段名大小写不一致也会导致列内容空白
• 赋值完成后可打印availableOrdersDatasource.data确认值为一维数组结构，不存在嵌套Object的情况

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