Angular mat-table分页仅第一页有数据 点击下一页为空如何解决？

核心问题原因 #

• slice方法参数错误
  Array.slice(startIndex, endIndex)的第二个参数是截取的结束索引，你当前代码传入的是单页长度this.paginator?.pageSize，跳转到第二页时（假设pageIndex=1、pageSize=5），实际执行的是slice(5, 5)，返回空数组，自然没有数据展示。
• 错误覆盖了MatTableDataSource实例
  初始化时你给personsFiltered赋值的是MatTableDataSource类型实例，该类型自带分页、过滤能力，只要正确绑定paginator就会自动处理分页逻辑。但你在FilterChanged方法里直接把它替换成了RxJS的Observable对象，原有绑定的分页器完全失效，手动写slice分页属于多此一举。
• 分页器事件与绑定错误
  1. 你监听了通用click事件而非mat-paginator专属的page事件，点击分页时无法保证拿到最新的pageIndex、pageSize参数
  2. 没有给分页器加模板引用标记，TS代码中this.paginator无法获取到分页器实例，取值可能为undefined

首选修复方案（使用MatTableDataSource原生能力，无需手动处理分页） #

1. 修改TS代码 #

// 先引入依赖
import { ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

// 类内声明
@ViewChild(MatPaginator) paginator!: MatPaginator;
persons: any[] = [];
// 统一数据源类型为MatTableDataSource
personsFiltered = new MatTableDataSource<any>([]);
vornameFilter = '';

ngAfterViewInit() {
  // 分页器初始化后绑定到数据源
  this.personsFiltered.paginator = this.paginator;
  // 自定义过滤规则，仅匹配vorname字段
  this.personsFiltered.filterPredicate = (data, filter) => {
    return data.vorname?.toLowerCase().includes(filter.toLowerCase());
  }
}

// 数据初始化逻辑
initData(data: any[]) {
  this.persons = data;
  this.personsFiltered.data = data;
}

// 过滤触发方法
FilterChanged(){
  this.personsFiltered.filter = this.vornameFilter.trim().toLowerCase();
  // 过滤后自动回到第一页
  this.personsFiltered.paginator?.firstPage();
}

2. 修改模板代码 #

<table mat-table [dataSource]="personsFiltered" *ngIf="personsFiltered">
  <ng-container matColumnDef="Name">  
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let user"> 
      {{user.nachname}}, {{user.vorname}}
    </td>  
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>  
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- 无需绑定事件，MatTableDataSource会自动处理分页逻辑 -->
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

次选修复方案（保留手动分页逻辑） #

如果一定要用自定义Observable手动处理分页，只需要修正两处代码即可：

1. 修正FilterChanged中的slice参数 #

map(p => p.slice(
  this.paginator?.pageIndex * this.paginator?.pageSize, 
  (this.paginator?.pageIndex + 1) * this.paginator?.pageSize
)) 

2. 修正模板分页器绑定 #

<!-- 增加模板引用，绑定page事件而非click事件 -->
<mat-paginator #paginator (page)="FilterChanged()" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

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