Angular MatTable排序搜索失效求助：匹配嵌套JSON字段

问题根源：MatTable的排序、搜索默认会用matColumnDef的名称直接访问行对象的顶层属性，但你的数据是嵌套结构row.loan.loanKey，和列名loanKey不匹配，导致默认逻辑无法正确取值，功能失效。

以下是两种实用解决方案：

方案一：自定义数据访问器（推荐，无需修改数据源结构） #

在组件的TS文件中，给MatTableDataSource配置自定义的排序访问器和过滤规则，告诉组件如何根据列名获取嵌套字段的值：

import { MatTableDataSource } from '@angular/material/table';
import { Sort } from '@angular/material/sort';

// 初始化数据源（YourDataType是你的数据类型定义）
dataSource = new MatTableDataSource<YourDataType>(yourRawLoanData);

// 自定义排序数据访问器
this.dataSource.sortDataAccessor = (item, property) => {
  switch(property) {
    case 'loanKey':
      return item.loan.loanKey;
    case 'poolNum':
      return item.loan.poolNum;
    // 后续新增嵌套列，在这里添加对应的case即可
    default:
      return item[property]; // 处理非嵌套字段的默认情况
  }
};

// 自定义搜索过滤规则（如果需要搜索功能）
this.dataSource.filterPredicate = (data, filter: string) => {
  const searchTerm = filter.toLowerCase().trim();
  // 按需添加需要搜索的字段
  return data.loan.loanKey.toString().toLowerCase().includes(searchTerm)
    || data.loan.poolNum.toLowerCase().includes(searchTerm);
};

模板代码保持不变，排序和搜索功能即可正常工作。

方案二：扁平化数据源（简单直观，适合数据结构不复杂的场景） #

把原始的嵌套数据转换成扁平化结构，让列名和字段名完全对应：

// 转换原始数据为扁平化结构
const flattenedData = yourRawLoanData.map(item => ({
  loanKey: item.loan.loanKey,
  poolNum: item.loan.poolNum,
  triggers: item.loan.triggers // 如果需要保留triggers字段，可一并加入
}));

// 给数据源赋值
this.dataSource.data = flattenedData;

然后修改模板中的插值语句，直接访问顶层字段：

<ng-container matColumnDef="loanKey">
     <th mat-header-cell *matHeaderCellDef mat-sort-header>Loan Key/ID</th>
     <td mat-cell *matCellDef="let row">
     {{ row.loanKey }}
     </td>
</ng-container>

这样MatTable的默认排序、搜索逻辑就能直接生效，无需额外配置。

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