Angular Material表格分页：监听PageSize与PageIndex变化并传至后端

我之前刚好处理过类似的后端分页需求，这就给你一步步拆解实现方法：

1. 先在模板中关联分页器组件 #

首先确保你的模板里已经正确引入了MatPaginator，并且给它添加一个模板引用变量，方便组件类获取实例：

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

<mat-paginator #paginator
               [pageSizeOptions]="[10, 20, 50, 100]"
               showFirstLastButtons>
</mat-paginator>

2. 在组件类中获取分页器实例并监听变化 #

通过@ViewChild装饰器获取分页器的实例，然后监听它的page事件——这个事件会在**页码（pageIndex）或每页条数（pageSize）**发生变化时自动触发：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-your-table-component',
  templateUrl: './your-table-component.component.html',
  styleUrls: ['./your-table-component.component.css']
})
export class YourTableComponent implements AfterViewInit {
  @ViewChild('paginator') paginator!: MatPaginator;
  dataSource: any[] = [];

  constructor(private http: HttpClient) {}

  ngAfterViewInit() {
    // 初始化时先请求一次第一页数据
    this.fetchDataFromBackend();

    // 监听分页器的参数变化事件
    this.paginator.page.subscribe(() => {
      this.fetchDataFromBackend();
    });
  }

  // 调用后端接口的核心方法
  private fetchDataFromBackend() {
    const pageIndex = this.paginator.pageIndex;
    const pageSize = this.paginator.pageSize;

    // 替换成你的实际后端API地址，把分页参数传过去
    this.http.get('/api/your-target-data', {
      params: {
        page: pageIndex.toString(),
        size: pageSize.toString()
      }
    }).subscribe(response => {
      // 把后端返回的当前页数据赋值给表格数据源
      this.dataSource = response.data;
      // 同步后端返回的总数据条数，让分页器正确计算页码范围
      this.paginator.length = response.totalCount;
    });
  }
}

3. 关键细节补充 #

• 初始化请求：一定要在ngAfterViewInit里先调用一次fetchDataFromBackend，不然页面刚加载时不会自动请求第一页的数据。
• 总条数同步：后端返回数据时，必须把总数据条数赋值给paginator.length，否则分页器无法正确显示总页数和页码按钮状态。
• 防抖优化（可选）：如果担心用户频繁切换页码/每页条数导致过多请求，可以给page事件加防抖处理，用RxJS的debounceTime：

  import { debounceTime } from 'rxjs/operators';
  
  // 替换原来的监听代码
  this.paginator.page.pipe(debounceTime(300)).subscribe(() => {
    this.fetchDataFromBackend();
  });
  

• 结合其他筛选条件：如果还有搜索、分类筛选等功能，可以把这些参数和分页参数一起打包传给后端，在fetchDataFromBackend里统一处理。

这样就能完美监听分页器的参数变化，把pageSize和pageIndex传给后端实现真正的后端分页啦！

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