Question

我需要在单个页面中包含多个NgbPagination组件。

参考：

https://ng-bootstrap.github.io/#/components/pagination/examples

我尝试使用ID。但这没有用。在第一次分页中更改一个值会影响两个表。

分页1：

<ngb-pagination id="page1" [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" [boundaryLinks]="true">
      <ng-template ngbPaginationFirst>First</ng-template>
      <ng-template ngbPaginationLast>Last</ng-template>
      <ng-template ngbPaginationPrevious>Prev</ng-template>
      <ng-template ngbPaginationNext>Next</ng-template>
      <ng-template ngbPaginationEllipsis>...</ng-template>
      <ng-template ngbPaginationNumber let-page>{{ page }}</ng-template>
  </ngb-pagination>

分页2：

<ngb-pagination id="page2"  [collectionSize]="collectionSizeb" [(page)]="pageb" [pageSize]="pageSizeb">
  </ngb-pagination>

请让我知道如何在单个页面中实现多个NgbPagination？

Answer 1

您可以在单个页面上使用多页分页。为每个分页设置页面变量很重要。请参阅我的stackblitz demo here

在您的组件中：

page1 = 1;
page2 = 1;

在您的组件html中：

<ngb-pagination id="page1" [collectionSize]="50" [(page)]="page1" [pageSize]="10" [boundaryLinks]="true">
    <ng-template ngbPaginationFirst>First</ng-template>
    <ng-template ngbPaginationLast>Last</ng-template>
    <ng-template ngbPaginationPrevious>Prev</ng-template>
    <ng-template ngbPaginationNext>Next</ng-template>
    <ng-template ngbPaginationEllipsis>...</ng-template>
</ngb-pagination>

<ngb-pagination id="page2" [collectionSize]="50" [(page)]="page2" [pageSize]="10">
</ngb-pagination>

在单个页面中处理多个NgbPagination

1 个答案: