Angular中MatTableDataSource处理Record类型projects排序报错如何解决

问题根本原因 #

MatTableDataSource 初始化仅接受数组类型作为入参，你当前的 projects 是键值对类型 Record<string, Project>，不属于数组，因此触发类型不匹配报错，和内部结构识别无关。

完整修改方案 #

1. TS 代码修改

// 1. 定义dataSource的泛型为带key和value的结构，和原keyvalue管道输出结构保持一致
public dataSource = new MatTableDataSource<{key: string, value: Project}>();

// 2. 在你获取projects数据的位置（dbService返回数据的回调/订阅方法内），把Record转成数组赋值
// 示例：假设你从dbService拿到数据后给this.projects赋值，后续加一行
this.projects = 从dbService获取的返回值;
// 新增下面这行转数据
this.dataSource.data = Object.entries(this.projects).map(([key, project]) => ({key, value: project}));

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    // 新增排序字段映射配置，因为列名对应Project的属性在value下
    this.dataSource.sortingDataAccessor = (rowItem, columnName) => {
      return rowItem.value[columnName as keyof Project];
    };
}

// 额外注意：addProject新增项目完成后，需要同步更新dataSource.data，和上面转数据的逻辑一致
addProject() {
  // 你原有新增逻辑执行完，更新了this.projects后，加下面这行
  this.dataSource.data = Object.entries(this.projects).map(([key, project]) => ({key, value: project}));
}

2. HTML 代码修改

仅需要修改table的dataSource绑定即可，原有单元格的渲染逻辑（比如{{element.value.Name}}）、列定义都不用改：

<!-- 把原来的 [dataSource]="projects | keyvalue" 改成下面的 -->
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

可选简化方案 #

如果你不需要用到Record的字符串键（比如删除操作用不到这个key），可以直接把Record转成Project数组，更简单：

// 定义dataSource泛型为Project
public dataSource = new MatTableDataSource<Project>();
// 赋值时直接取values
this.dataSource.data = Object.values(this.projects);
// 不用加sortingDataAccessor配置，列名可以直接匹配Project的属性

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