Обработка нескольких NgbPagination на одной странице - PullRequest
Новая
       20

Обработка нескольких NgbPagination на одной странице

0 голосов
/ 01 апреля 2019

Мне нужно иметь несколько компонентов NgbPagination на одной странице.

Ссылка:

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

Я пытался использовать идентификатор.Но это не сработало.Изменение одного значения в первой нумерации страниц влияет на обе таблицы.

Пагинация: 

<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>

Пагинация: 

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

Пожалуйста, дайте мне знать, как реализовать множественную NgbPagination водна страница?

1 Ответ

1 голос
/ 04 апреля 2019

Вы можете использовать множественные нумерации страниц на одной странице. Важно установить переменную страницы для каждой нумерации страниц. Пожалуйста, посмотрите мою демонстрацию stackblitz здесь

В вашем компоненте: 

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>
...