Angular Material数据表拉取后端数据后分页与排序功能失效怎么解决？

问题原因 #

1. 时序问题：ngAfterViewInit 执行时后端数据还未返回，此时给 dataSource 绑定的分页器、排序器绑定的是空数据源，后续更新 dataSource.data 后没有重新绑定这两个组件，导致分页器识别不到最新数据量，排序功能也无法绑定到有效数据源。
2. 嵌套字段排序不兼容：download 列是嵌套对象结构，Angular Material Table 默认的排序规则仅支持识别一级属性，无法直接读取嵌套对象的值用于排序。
3. （可选遗漏）组件所在模块未正确导入 MatSortModule、MatPaginatorModule，也会导致功能失效。

解决方案 #

按以下步骤修改代码即可：

1. 修改接口请求逻辑，数据返回后重新绑定分页器和排序器
   修改getTestReportData方法中数据赋值部分的代码：

if(resp.body.data && resp.body.data.length > 0) {
  this.dataSource.data = resp.body.data;
  // 新增：数据加载完成后重新绑定分页器、排序器
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
  this.length = resp.body.data.length;
}

2. 自定义排序规则适配嵌套字段
   在ngAfterViewInit中新增sortingDataAccessor配置，指定嵌套字段的取值逻辑：

ngAfterViewInit() {
  // 自定义排序取值逻辑，适配嵌套结构的download列
  this.dataSource.sortingDataAccessor = (item, property) => {
    switch(property) {
      // 可根据实际排序需求调整download列的排序依据，此处示例取log字段的值排序
      case 'download': return item.download.log || item.download.dataReport || item.download.htmlReport || '';
      default: return item[property as keyof PeriodicElement] ?? '';
    }
  };
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
}

3. 检查模块导入（可选）
   确认当前组件所在的NgModule中已经导入了两个依赖模块：

import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    // 其他导入...
    MatSortModule,
    MatPaginatorModule
  ]
})

4. 如果表格/分页器被*ngIf包裹的额外处理
   如果你的表格或者分页器放在了带有*ngIf的容器中（比如加载状态下隐藏表格），@ViewChild会无法及时获取组件实例，改为带setter的查询即可：

@ViewChild(MatPaginator) set paginator(value: MatPaginator) {
  if (value && this.dataSource) this.dataSource.paginator = value;
}
@ViewChild(MatSort) set sort(value: MatSort) {
  if (value && this.dataSource) this.dataSource.sort = value;
}

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