PrimeNG：如何以编程方式更改分页器的选中页码？

针对你遇到的服务器端过滤后分页器无法跳回第一页、调用changePage方法UI不更新的问题，有两种可靠解决方式：

方法一：使用双向绑定控制页码（推荐） #

通过[(page)]双向绑定页码变量，让Angular自动同步数据与视图，这是最贴合Angular数据流模式的方案：

修改组件代码（Component.ts） #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Paginator } from 'primeng/paginator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('paginator', { static: true }) paginator?: Paginator;
  currentPage = 1; // 定义页码变量

  ngAfterViewInit(): void {
    // 直接修改变量即可同步UI，无需setTimeout（如需模拟异步场景可保留）
    this.currentPage = 3;
    console.log('Currently selected page:', this.paginator?.getPage());
  }

  // 过滤条件变更时调用此方法
  handleFilterChange() {
    this.currentPage = 1; // 重置到第一页
    // 触发服务器API请求，携带currentPage和最新过滤条件
  }
}

修改模板代码（Component.html） #

<p-paginator
  #paginator
  [(page)]="currentPage" <!-- 添加双向绑定 -->
  [rows]="10"
  [totalRecords]="120"
  [rowsPerPageOptions]="[10, 20, 30]">
</p-paginator>

方法二：调用updatePage方法强制更新视图 #

如果不想使用双向绑定，可以调用PrimeNG分页器的updatePage方法（而非changePage），该方法会直接更新组件内部状态并刷新UI：

修改组件代码中的ngAfterViewInit #

ngAfterViewInit(): void {
  setTimeout(() => {
    this.paginator?.updatePage(3);
    console.log('Currently selected page:', this.paginator?.getPage());
  });
}

问题原因说明 #

你之前调用changePage时控制台输出正确但UI不更新，是因为changePage主要用于触发页码变更事件，并未直接同步视图渲染状态；而双向绑定或updatePage方法会同时更新组件内部状态与视图，保证数据和UI的一致性。

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