如何为MatTable中显示子数组长度的列启用mat-sort-header排序

要实现基于propB.length的排序，需要自定义MatTableDataSource的排序数据访问器，具体步骤如下：

1. 完成基础配置 #

首先确保组件中已正确引入并绑定MatSort：

• 通过@ViewChild获取MatSort实例
• 在视图初始化完成后将其绑定到数据源

组件类代码示例：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';

interface TableData {
  propA: string;
  propB: string[];
}

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  dataSource = new MatTableDataSource<TableData>([
    {propA: 'something', propB: ['a', 'b', 'c']},
    {propA: 'somethingElse', propB: ['d', 'e', 'f']}
  ]);
  displayedColumns = ['propA', 'propBCount'];

  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.setupCustomSort();
  }
}

2. 自定义排序数据访问器 #

添加setupCustomSort方法，重写数据源的sortingDataAccessor逻辑：当排序目标为propBCount时，返回propB.length的值；其他列沿用默认的属性访问逻辑。

private setupCustomSort() {
  this.dataSource.sortingDataAccessor = (item, sortHeaderId) => {
    switch (sortHeaderId) {
      case 'propBCount':
        return item.propB.length;
      default:
        return item[sortHeaderId as keyof TableData];
    }
  };
}

3. 确认模板配置 #

确保模板中的表格和列定义绑定正确：

• 表格标签添加matSort绑定
• mat-sort-header无需额外配置，会自动匹配matColumnDef的propBCount作为排序标识

模板代码示例：

<table mat-table [dataSource]="dataSource" matSort>
  <!-- propA列 -->
  <ng-container matColumnDef="propA">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Prop A </th>
    <td mat-cell *matCellDef="let element"> {{element.propA}} </td>
  </ng-container>

  <!-- propBCount列 -->
  <ng-container matColumnDef="propBCount">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Items </th>
    <td mat-cell *matCellDef="let element"> {{element.propB.length}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

完成以上配置后，点击「Total Items」列的表头，即可根据propB数组的长度进行升序/降序排序。

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