Angular Material表格排序分页异常：数据加载时机问题

问题根源 #

异步数据加载的回调执行晚于ngAfterViewInit，此时你在ngAfterViewInit中给dataSource绑定的分页器和排序器，会因为后续重新创建MatTableDataSource实例而失效——新的dataSource并没有关联分页和排序组件。

核心修正思路 #

提前初始化dataSource并保持实例不变，仅更新其数据；确保分页器和排序器与同一个dataSource实例绑定。

步骤1：修正组件类变量定义 #

在组件类中提前初始化dataSource为一个空的MatTableDataSource，同时正确声明ViewChild：

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

// 组件类内部
dataSource = new MatTableDataSource<ShoppingCartItem>([]); // 提前初始化空数据源
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;

步骤2：修改ngOnInit数据加载逻辑 #

不再重新创建dataSource实例，直接更新其data属性：

ngOnInit(): void {
    console.log("ngOnInit started");
    this.shoppingcartService.GetShoppingCart().subscribe({
      next: (data: ShoppingCart) => {
        this.shoppingCart = data;
        console.log("data loaded");
        this.shoppingCart.shoppingCartItems.forEach((item) => {
          item.productName = item.product?.name;
        });
        // 复用已绑定分页/排序的dataSource实例，直接更新数据
        this.dataSource.data = this.shoppingCart.shoppingCartItems;       
      },
      error: (error: any) => {
        console.error('加载购物车数据失败', error); // 添加错误日志便于排查
      },
      complete: () => {  
      }
    });
    console.log("ngOnInit ended");
}

步骤3：修正服务中的请求头设置 #

移除无效的请求头（mode: 'no-cors'和Access-Control-Allow-Origin是服务器端配置项，客户端设置无效甚至会导致请求异常）：

GetShoppingCart() : Observable<IShoppingCart> {
    let url = global.serverBase + "/api/ShoppingCarts/GetShoppingCartAsync";
    let headers = new HttpHeaders()
    .set('content-type','application/json'); // 仅保留必要的Content-Type头
    
    return this.httpClient.get<IShoppingCart>(url, { headers }).pipe(
      catchError((error) => {
        console.error('获取购物车数据出错', error);
        throw error;
      })
    );
}

步骤4：保留原ngAfterViewInit逻辑 #

原有的绑定逻辑可以保留，因为dataSource已提前初始化，此时绑定分页和排序组件是有效的：

ngAfterViewInit() { 
    console.log("ngAfterViewInit started");
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort; 
    console.log("ngAfterViewInit end");
}

额外优化（可选） #

如果异步请求可能在ngAfterViewInit之前完成（如数据缓存导致加载极快），可在next回调中再次确认绑定：

// 在next回调末尾添加
if (this.paginator && this.sort) {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

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