PrimeNG 分页器设置页面

Question

我正在 Angular 9 项目中使用 primeng 分页器组件来对大量配置文件进行分页。如果用户位于第 3 页，打开个人资料并返回搜索，则当前页面为 1，但它应该是 3。我已将页面保存在服务中，因此会显示正确的数据，但分页器显示的是错误的页面。我找不到设置分页器当前页面的方法。使用 [first] 属性不起作用。

Answer 1

您需要手动设置页面。您可以使用 Angular@ViewChild装饰器来访问 PrimeNgPaginator组件。

在模板中为该分页器提供一个 id：

<p-paginator #paginator ...></p-paginator>

并在组件中使用它：

import { Paginator } from 'primeng/paginator';


@ViewChild('paginator', { static: true }) paginator: Paginator

private updateCurrentPage(currentPage: number): void {
  setTimeout(() => this.paginator.changePage(currentPage));
}

Answer 2

第一个属性是定义 Primeng 提供的寻呼机当前页面的最佳选项。

第一=（第1页）*行；

在模板中，

      <p-paginator
        [rows]="10"
        [totalRecords]="120"
        [rowsPerPageOptions]="[10, 20, 30]"
        [first]="first"
      ></p-paginator>

在组件中，

    pageSize = 10;  
    currentpage = 2;
    first;
    
     ngOnInit() {     
        this.first =  (this.currentpage-1)* this.pageSize;
     }

无需使用 setTimeout 即可成功设置活动页面。