Angular实现分页后表格无报错但不加载数据如何修复

你遇到的表格无数据、无报错问题是代码中存在几处逻辑错误，按以下步骤修复即可：

核心问题点&修复方法 #

1. 修复Pagination.ts中PageRequest类的属性赋值错误 #

你当前代码中构造函数声明的是带下划线的_pageQuery、_aditionalQuery，但类方法中调用的是无下划线的同名属性，这两个属性从未被赋值，会导致查询参数取值异常；同时原页码逻辑用真假值判断，当页码为0时会出现判断错误，且多余的+1操作会导致页码偏移（Spring Boot分页默认从0开始计数）。
替换为以下修复后代码：

export interface PageQuery {
  pageNumber: number;
  pageSize: number;
}

export interface QueryBuilder {
  pageQuery: PageQuery;
  aditionalQuery: Map<string, string>;
  buildQueryMap(): Map<string, string>;
  buildQueryString(): string;
  buildPageQueryMap(): Map<string, string>;
}

export class PageRequest implements QueryBuilder {
  // 直接在构造函数中声明公共属性，无需重复定义
  constructor(
    public pageQuery: PageQuery,
    public aditionalQuery: Map<string, string>
  ) {}

  buildQueryMap(): Map<string, string> {
    let buildQueryMap = new Map<string, string>([...this.buildPageQueryMap()]);
    if (this.aditionalQuery) {
      buildQueryMap = new Map<string, string>([
        ...buildQueryMap,
        ...this.aditionalQuery,
      ]);
    }
    return buildQueryMap;
  }
  buildQueryString(): string {
    return Array.from(this.buildQueryMap())
      // 增加参数编码，避免特殊字符导致请求异常
      .map((itemArray) => `${encodeURIComponent(itemArray[0])}=${encodeURIComponent(itemArray[1])}`)
      .join('&');
  }
  buildPageQueryMap(): Map<string, string> {
    let buildPageQueryMap = new Map<string, string>();
    // 修复页码取值逻辑，不用真假判断，直接做空值合并
    const pageNum = this.pageQuery?.pageNumber ?? 0;
    const pageSize = this.pageQuery?.pageSize ?? 5;
    buildPageQueryMap.set('page', `${pageNum}`);
    buildPageQueryMap.set('size', `${pageSize}`);
    return buildPageQueryMap;
  }
}

export class Page<T> {
  constructor(public content: T[], public totalElements: number) {}

  static fromResponse<T>(response: any) {
    const total = response.headers.get('X-total-Count');
    return new Page<T>(
      response.body ?? [],
      // 增加空值判断，避免拿不到响应头时出现NaN
      total ? parseInt(total) : 0
    );
  }
}

2. 修复组件中数据源绑定错误 #

这是表格不显示数据的核心原因：

• 你定义的MatTableDataSource泛型错误，MatTableDataSource接收的是表格行数据类型，也就是Veiculos，不是分页包装类Page<Veiculos>
• 接口返回分页数据后，你从未将分页对象中存储实际行数据的content数组赋值给数据源，表格拿不到渲染数据
• 额外查询参数未初始化，传值为undefined
• 服务端分页场景下不需要将MatPaginator、MatSort直接绑定给数据源，这是客户端分页的用法，会导致分页事件冲突

替换component.ts中对应代码：

export class VeiculoComponent implements OnInit {
  veiculos: Veiculos[] = [];
  page: Page<Veiculos> = new Page([], 0);
  // 修复泛型，数据源存储Veiculos类型的行数据
  pages = new MatTableDataSource<Veiculos>();
  pageEvent!: PageEvent;
  displayedColumns = ['placaOriginal', 'placaFria', 'modelo', 'marca', 'ano'];

  // ...省略addVeiculo等无关方法

  listarPaginas() {
    // 初始化空的额外查询参数，不要传入undefined
    const queryAdicional = new Map<string, string>();
    this.service
      .listPage(
        new PageRequest(
          {
            pageNumber: this.pageEvent ? this.pageEvent.pageIndex : 0,
            pageSize: this.pageEvent ? this.pageEvent.pageSize : 5,
          },
          queryAdicional
        )
      )
      .subscribe({
        next: (page) => {
          this.page = page;
          // 核心修复：将返回的行数据数组赋值给数据源
          this.pages.data = page.content;
          // 同步分页器总条数
          if (this.paginator) {
            this.paginator.length = page.totalElements;
          }
        },
        error: () => {
          this.page = new Page([], 0);
          this.pages.data = [];
          this.onError();
        }
      });
  }

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  ngAfterViewInit() {
    // 删除以下两行：服务端分页不需要给数据源绑定分页器、排序对象，自行监听事件处理即可
    // this.pages.paginator = this.paginator;
    // this.pages.sort = this.sort;
  }

  // ...省略构造函数、ngOnInit等无关代码
}

3. 修复模板中分页器默认参数不匹配 #

你当前分页器默认pageSize设为10，但代码中首次请求默认pageSize是5，会导致首次加载参数不一致，修改component.html中mat-paginator配置：

<mat-paginator 
  [length]="page.totalElements" 
  [pageSize]="5" 
  [pageSizeOptions]="[5, 10, 30, 100]"
  (page)="pageEvent = $event; listarPaginas()">
</mat-paginator>

额外注意项 #

如果修复后发现分页总条数显示为0，需要检查后端CORS配置，确保X-total-Count响应头被暴露（跨域场景下前端默认拿不到未暴露的自定义响应头）。

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