我正在为此苦苦挣扎。我的角度组件中有两个独立的 p-paginator 组件。我想让它们彼此同步。因此,如果我点击其中任何一个,另一个也应该更新。
当用户更改另一个分页器时,我尝试触发分页器(尚未更改)的changePage()事件,反之亦然,希望使它们同步,但这并没有很好地结束,因为它形成了无限循环。
任何有关的帮助将不胜感激。谢谢
@ViewChild('paginatorTop', { static: true }) paginatorTop: Paginator;
@ViewChild('paginatorBottom', { static: true }) paginatorBottom: Paginator;
onTopPageChange(e) {
this.filter.pageNo = e.page + 1;
this.getProducts();
}
onBottomPageChange(e) {
this.paginatorTop.changePage(e.page);
this.filter.pageNo = e.page + 1;
this.getProducts();
}
<!-- paginator 1 -->
<p-paginator #paginatorTop [rows]="perRow" showCurrentPageReport="true"
currentPageReportTemplate="Showing {currentPage} of {totalPages}" (onPageChange)="onTopPageChange($event)"
[totalRecords]="total" styleClass="pr-0">
</p-paginator>
<!-- Dynamic data coming from an API -->
<p-paginator #paginatorBottom [rows]="perRow" showCurrentPageReport="true"
currentPageReportTemplate="Showing {currentPage} of {totalPages}" (onPageChange)="onBottomPageChange($event)"
[totalRecords]="total" styleClass="pr-0">
</p-paginator>
用 1 个执行此操作的函数替换 2 个函数
onPageChange(e) {
this.paginatorTop.changePage(e.page);
this.paginatorBottom.changePage(e.page);
this.filter.pageNo = e.page + 1;
this.getProducts();
}
为了避免无限循环和两次调用 API,我就是这样做的:
currentPage = 0; //Manage current page, start with 0
pageChange(event: any) {
if(this.currentPage === event.page) return; //If the page didn't change do nothing
this.currentPage = event.page ;
// If paginatorTop still on different page , change it :
if(this.paginatorTop?.getPage() !== event.page){
this.paginatorTop.changePage(event.page);
}
// If paginatorBottom still on different page , change it :
if(this.paginatorBottom?.getPage() !== event.page) {
this.paginatorBottom.changePage(event.page);
}
//Call your API Once
}
这只会更新