我使用PrimeNG 14和Angular 14构建了一个带有分页器的过滤数据表.

我依赖于server-side filtering,因此每次过滤器更改都会触发一个返回新表数据的API请求.每当过滤器更改时,就会向用户显示第一个页面的匹配项,并且分页器应该跳回到"1".由于后者似乎不能开箱即用,所以我try 以编程方式设置所需的分页器状态.遗憾的是,我没有成功.

请看我的100或以下代码:

My Component.ts:

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

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

控制台输出为Currently selected page: 3,但在分页器1上仍保持选中状态.

My Component.html:

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

你对如何解决这个问题有什么建议吗?

推荐答案

这似乎是一个原始的问题,我建议你在GH上打开一个问题

以下是我所做的解决方法

public first = 0;
/*
...
*/
 private _changePage(page: number) {
    if(page < this.paginator.getPageCount())
      this.first = (page-1)*this.paginator.rows
  }


// add this to your paginator [first]="first"

Angular相关问答推荐

Angular ngModel双向数据绑定不适用于表单中的Select元素

FormArray包含嵌套的FormGroups.如何访问嵌套的表单组控件?

Angular中的Bootstrap carousel动态属性

对子router-outlet 应用主机样式

笔刷Angular 为17

Angular 17:延迟加载带参数的独立组件?

Angular 16-错误NG8002:无法绑定到NGModel,因为它不是输入的已知属性

如何使用formBuilder.Group()从角形表单中删除选定的选项?

Primeng:安装ANGLE 16.2.0版本

Angular 为什么延迟加载返回空路径?

从 Angular 应用程序中删除散列标签后无法从 Apache 访问 API

路由链接不在 Ionic 中执行

Angular 重新渲染仅使用ngrx在表中更改的行

Nz 树 Select .如何在子 node 中显示父 node 名称?

将 html ngModel 值传递给服务Angular

清除Angular2中的输入文本字段

Angular CLI 自定义 webpack 配置

在 Angular rxjs 中,我什么时候应该使用 `pipe` 与 `map`

Angular 2从assets文件夹加载CSS背景图像

Angular 2 组件不是任何 NgModule 的一部分