Angular Material 15表格后端分页及URL参数传递问题

核心问题分析与修复 #

问题1：URL参数拼接异常 #

当前服务类手动拼接URL时存在三类错误：

• 参数名拼写错误：quantidadePorPage 应为 quantidadePorPagina
• 硬编码固定值：quantidadePorPagina=10 未使用传入的动态参数
• 格式错误：手动拼接导致nmCliente参数后出现多余空格

修复方案：使用HttpParams动态构建请求参数
替换服务类中的getAll方法，通过HttpParams自动处理参数编码与拼接：

getAll(o={pagina: 1, quantidadePorPagina: 10, filtro: {nmCliente: ''}, tpSituacao: '1'}): Observable<any> {
  let params = new HttpParams()
    .set('pagina', o.pagina.toString())
    .set('quantidadePorPagina', o.quantidadePorPagina.toString())
    .set('nmCliente', o.filtro.nmCliente || '')
    .set('nmFantasia', o.filtro.nmFantasia || '')
    .set('dtCadastro', o.filtro.dtCadastro || '')
    .set('tpSituacao', o.tpSituacao || '');

  return this.http.get(`${this.apiUrl}/filtro/geral`, { params })
    .pipe(catchError(this.handleError));
}

问题2：分页组件加载异常 #

分页失效的核心原因：

• 未设置totalRows值，分页组件无法计算总页数与剩余数据量
• 分页切换时未携带当前过滤条件（状态筛选、搜索关键词）
• 未绑定sort和paginator到dataSource

修复步骤：

1. 绑定排序与分页器
   在组件的ngAfterViewInit生命周期中完成绑定：

ngAfterViewInit(): void {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

2. 统一数据加载逻辑
   封装loadClientes方法，确保所有场景（初始化、分页、筛选、搜索）都使用同一逻辑：

loadClientes() {
  this.isLoading = true;
  this.clientesService.getAll({
    pagina: this.pagina,
    quantidadePorPagina: this.quantidadePorPagina,
    filtro: { nmCliente: this.filtro },
    tpSituacao: this.filtroAtivos
  }).subscribe((response) => {
    this.isLoading = false;
    this.allClientes = response.data;
    this.dataSource.data = response.data;
    this.totalRows = response.total; // 需后端返回总条数，格式如{ data: [], total: number }
  });
}

// 替换ngOnInit中的初始化调用
ngOnInit(): void {
  this.loadClientes();
}

3. 修复分页切换逻辑
   更新pageChanged方法，调用统一加载逻辑：

pageChanged(event: PageEvent) {
  this.quantidadePorPagina = event.pageSize;
  this.pagina = event.pageIndex + 1;
  this.loadClientes();
}

4. 补全状态筛选与搜索逻辑
   实现缺失的筛选方法，确保切换条件后重新加载数据：

filtraAtivos(event: Event) {
  const target = event.target as HTMLInputElement;
  this.filtroAtivos = target.value;
  this.pagina = 1; // 切换状态后回到第一页
  this.loadClientes();
}

applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value.trim();
  this.filtro = filterValue;
  this.pagina = 1; // 搜索后回到第一页
  this.loadClientes();
}

5. 同步分页器配置
   更新HTML中分页器的pageSize绑定，确保与组件参数同步：

<mat-paginator
  [length]="totalRows"
  [pageSize]="quantidadePorPagina"
  [pageSizeOptions]="pageSizeOptions"
  (page)="pageChanged($event)"
  showFirstLastButtons
  aria-label="Select page of users"
  #paginator
>
</mat-paginator>

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