Angular Material分页器刷新后仅点击才加载首页问题求助

你的问题核心在于页面刷新时，分页器的初始首页数据没有正确加载，原因如下：

1. 初始化时productsArray是空数组，直接赋值的pageSlice自然也是空的；
2. 分页器的(page)事件仅在用户点击分页按钮时触发，刷新页面时不会自动执行onPageChange逻辑；
3. 模板中[length]="this.productsArray.length"的this是多余的，Angular模板里直接使用变量名即可。

修正步骤 #

1. 修复模板中的分页器绑定

把分页器的length绑定修改为：

[length]="productsArray.length"

2. 数据加载完成后初始化首页数据

如果你的productsArray是通过异步请求获取的（比如从API拉取），在数据返回后手动初始化分页逻辑：

import { Component, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
// 导入你的Product类型和数据服务

@Component({
  // 组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit {
  productsArray: Product[] = [];
  pageSlice: Product[] = [];
  defaultPageSize = 10;

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    // 模拟异步获取产品数据
    this.productService.getProducts().subscribe(products => {
      this.productsArray = products;
      // 数据加载完成后初始化首页数据
      this.pageSlice = this.productsArray.slice(0, this.defaultPageSize);
    });
  }

  onPageChange(event: PageEvent) {
    const startIndex = event.pageIndex * event.pageSize;
    let endIndex = startIndex + event.pageSize;
    if (endIndex > this.productsArray.length) {
      endIndex = this.productsArray.length;
    }
    this.pageSlice = this.productsArray.slice(startIndex, endIndex);
  }
}

3. 同步数据场景的初始化

如果productsArray是同步赋值的（比如硬编码数据），在ngOnInit中初始化分页：

ngOnInit(): void {
  // 假设这里同步赋值产品数据
  this.productsArray = [/* 你的产品数据 */];
  // 初始化首页切片
  this.pageSlice = this.productsArray.slice(0, 10);
}

可选：手动触发分页器初始事件

也可以在数据加载完成后，手动调用onPageChange并传入初始分页参数：

// 数据加载完成后执行
this.onPageChange({
  pageIndex: 0,
  pageSize: 10,
  length: this.productsArray.length
} as PageEvent);

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