Mat Paginator长度异常：上/下一页按钮失效及length为0的解决方法

核心原因 #

Mat Paginator的分页按钮状态由length、pageIndex、pageSize三个参数共同控制，当length为0时，组件会判定无数据，直接禁用分页按钮。

具体修复步骤 #

1. 绑定真实数据源总条数 #

在组件类中，需将Mat Paginator的length绑定到数据源总条数（而非当前分页后的条数）：

import { MatPaginator } from '@angular/material/paginator';
import { ViewChild } from '@angular/core';

export class YourComponent {
  // 存储数据源总条数
  totalItems: number = 0;
  // 当前分页展示的数据
  displayedData: any[] = [];

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  // 示例：获取数据的方法
  loadData() {
    yourApiService.getList().subscribe(res => {
      this.displayedData = res.pageData;
      // 关键：将接口返回的总条数赋值给totalItems
      this.totalItems = res.totalCount;
      // 若先初始化分页器再获取数据，需手动更新分页器长度
      this.paginator.length = this.totalItems;
    });
  }
}

2. 模板中正确关联属性 #

在HTML模板里，确保Mat Paginator的length绑定到总条数变量，并监听分页切换事件：

<table mat-table [dataSource]="displayedData">
  <!-- 表格列定义 -->
</table>

<mat-paginator
  [length]="totalItems"
  [pageSizeOptions]="[5, 10, 20]"
  showFirstLastButtons
  (page)="handlePageChange($event)"
></mat-paginator>

3. 处理分页切换逻辑 #

用户切换分页时，根据分页参数重新获取对应页的数据：

handlePageChange(event: any) {
  const pageIndex = event.pageIndex;
  const pageSize = event.pageSize;
  yourApiService.getList(pageIndex, pageSize).subscribe(res => {
    this.displayedData = res.pageData;
    this.totalItems = res.totalCount;
  });
}

4. 排查常见错误 #

• 避免初始化时将length硬编码为0，或获取数据后忘记更新该值
• 若使用MatTableDataSource，需正确关联分页器并更新数据：

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

dataSource = new MatTableDataSource<any>([]);

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
}

loadData() {
  yourApiService.getList().subscribe(res => {
    this.dataSource.data = res.pageData;
    this.dataSource.paginator!.length = res.totalCount;
  });
}

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