Angular Material Data Table分页排序失效，控制台报TypeError错误

我之前也碰到过一模一样的情况，咱们一步步拆解排查，应该能快速解决：

1. 先检查模板里的引用是否匹配 #

打开你的product-list-component.html，确认分页器和排序组件的#引用名称，和组件类里的@ViewChild变量完全对应：

<!-- 表格组件要绑定matSort指令 -->
<table mat-table [dataSource]="dataSource" matSort>
  <!-- 你的列定义内容... -->
</table>

<!-- 分页器的#paginator要和组件类里的变量名一致 -->
<mat-paginator #paginator
               [pageSizeOptions]="[5, 10, 20]"
               showFirstLastButtons>
</mat-paginator>

2. 组件类里的关键初始化步骤 #

在product-list-component.ts里，核心是要提前初始化dataSource，不能让它处于undefined状态，同时正确关联视图元素：

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

// 假设你的产品数据类型
interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list-component.html',
  styleUrls: ['./product-list-component.css']
})
export class ProductListComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['id', 'name', 'price'];
  // 重点：提前用空数组初始化dataSource，避免undefined
  dataSource = new MatTableDataSource<Product>([]);

  // 用@ViewChild获取视图中的分页器和排序组件，变量名要和模板#引用一致
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor() { }

  ngOnInit(): void {
    // 这里加载你的JSON数据源，比如从服务或本地文件获取
    this.loadProductData();
  }

  ngAfterViewInit(): void {
    // 视图初始化完成后，给dataSource绑定分页器和排序
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  loadProductData() {
    // 模拟加载JSON数据，实际项目中可能是HTTP请求
    const mockProducts: Product[] = [
      { id: 1, name: '无线耳机', price: 299 },
      { id: 2, name: '智能手表', price: 1299 }
    ];
    this.dataSource.data = mockProducts;
  }

  // 你的筛选功能实现（保留你原来的逻辑即可）
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

3. 容易忽略的模块导入检查 #

别忘记在你的模块（比如AppModule或功能模块）里导入Material相关模块，否则视图组件不会被识别，@ViewChild就拿不到实例：

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

@NgModule({
  imports: [
    // ...其他必要模块
    MatTableModule,
    MatPaginatorModule,
    MatSortModule
  ]
})
export class YourFeatureModule { }

4. 特殊场景：条件渲染导致的视图延迟加载 #

如果你的表格或分页器被*ngIf等条件指令包裹，导致ngAfterViewInit执行时组件还没渲染，那可以改用setter方式监听视图元素的变化：

@ViewChild(MatPaginator, { static: false }) set paginator(paginator: MatPaginator) {
  if (paginator) {
    this.dataSource.paginator = paginator;
  }
}

@ViewChild(MatSort, { static: false }) set sort(sort: MatSort) {
  if (sort) {
    this.dataSource.sort = sort;
  }
}

这种方式会在分页器/排序组件真正渲染完成后自动绑定，避免了视图未初始化的问题。

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