Как реализовать Bootstrap 4 для Angular 2 ngb-pagination

Question

У меня есть приложение Angular2 с component, где у меня есть таблица. Таблица сгенерирована с использованием команды *ngFor. Каждая строка table представляет собой объект с 9 полями, которые загружаются из бэкэнд при инициализации компонента. В приложении я пытаюсь использовать ng-bootstrap для углового модуля. ng-boorstrap В частности, я пытаюсь реализовать компонент pagination.

Может кто-нибудь объяснить, как поместить код так, чтобы он отображался, например. только 10 строк на страницу PLS? Или дайте мне ссылку, где выполняется реализация.

То, что я сделал это:

• поставить NgbModule ссылки на мой модуль, в котором я объявляю свой компонент, а также NgbPaginationConfig модуля (необходимо для использования пользовательских пагинации)

• положить ngb-pagination код в представлении моих component как этот

  <table class="table table-striped"> 
  <thead> 
      <tr> 
       <th>Tracking #</th> 
       <th>Brand</th> 
       <th>Geography</th> 
       <th>Country</th> 
       <th>Contract Name</th> 
       <th>Project Name</th> 
       <th>Status</th> 
       <th>$US BMC</th> 
       <th>Release #</th> 
       <th id="column-last"></th> 
      </tr> 
  </thead> 
  <tbody> 
      <tr *ngFor="let item of viewRows "> 
       <td>{{item.trackingNr}}</td> 
       <td>{{item.brand}}</td> 
       <td>{{item.geo}}</td> 
       <td>{{item.country}}</td> 
       <td>{{item.contractName}}</td> 
       <td>{{item.projectName}}</td> 
       <td>{{item.status}}</td> 
       <td>{{item.usBmc}}</td> 
       <td>{{item.releaseNr}}</td> 
       <td id="column-last"> 
        <span class="awficon-edit" id="row-icons"></span> 
        <span class="awficon-close-2" id="row-icons"></span> 
       </td> 
      </tr> 
  </tbody> 
  

Answer 1

Это мое рабочее решение. API для NGB-пагинацией: https://ng-bootstrap.github.io/#/components/pagination

... 
</table> 
<ngb-pagination [collectionSize]="totalItems" [pageSize]="itemsPerPage" [(page)]="page" [maxSize]="7" [rotate]="true" (pageChange)="loadPage($event)"></ngb-pagination> 

В компоненте вам нужно некоторое подобное. Не забудьте установить переменную в конструкторе:

itemsPerPage: number; 
    totalItems: any; 
    page: any; 
    previousPage: any; 

    ... 
    loadPage(page: number) { 
    if (page !== this.previousPage) { 
     this.previousPage = page; 
     this.loadData(); 
    } 
    } 
    ... 

    loadData() { 
    this.dataService.query({ 
     page: this.page - 1, 
     size: this.itemsPerPage, 
    }).subscribe(
     (res: Response) => this.onSuccess(res.json(), res.headers), 
     (res: Response) => this.onError(res.json()) 
    ) 
    } 

Answer 2

Ok. Я нашел замечательное решение в github. Проверьте это. https://github.com/michaelbromley/ng2-pagination