Angular Material表格matSort首列无法排序求解决方案

你的问题核心在于：MatSort默认会使用matColumnDef的字段名（这里是Name）去匹配数据对象的直接属性，但该列绑定的是嵌套属性element.party.name，排序逻辑无法自动识别嵌套路径，导致无法触发排序。

下面是两种可行的解决方法：

方法一：自定义排序Accessor函数（推荐） #

在组件TS文件中，给MatTableDataSource设置sortingDataAccessor，手动指定该列的排序取值逻辑：

ngOnChanges() { 
    this.dataSource = new MatTableDataSource<Data>(this.someData);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    
    // 添加排序Accessor，处理嵌套属性
    this.dataSource.sortingDataAccessor = (item, property) => {
        if (property === 'Name') {
            // 返回嵌套的party.name作为排序依据
            return item.party.name;
        }
        // 其他列沿用默认属性匹配逻辑
        return item[property as keyof Data];
    };
}

方法二：指定sortId并配合Accessor #

也可以给mat-sort-header指定自定义的sortId，再通过Accessor映射到嵌套属性：

HTML修改： #

<ng-container matColumnDef="Name">
    <!-- 给mat-sort-header设置自定义sortId -->
    <th mat-header-cell *matHeaderCellDef mat-sort-header="partyName"> Name </th>
    <td data-th="Customer Name" mat-cell *matCellDef="let element"> {{element.party.name}} </td>
</ng-container>

TS修改： #

ngOnChanges() { 
    this.dataSource = new MatTableDataSource<Data>(this.someData);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    
    this.dataSource.sortingDataAccessor = (item, property) => {
        switch(property) {
            case 'partyName':
                return item.party.name;
            default:
                return item[property as keyof Data];
        }
    };
}

额外检查项 #

1. 确保模块中已导入MatSortModule
2. 组件中已正确声明@ViewChild(MatSort) sort!: MatSort;（否则this.sort会是undefined，导致全局排序失效）
3. 确认someData中的每一条数据都存在party.name属性，避免排序时出现undefined干扰

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