如何为 Angular 2 ngb 分页实现 Bootstrap 4

Question

我有一个Angular2 应用程序和一个component，我有一张桌子。 表是通过*ngFor 指令生成的。 table 的每一行都是一个包含 9 个字段的对象，该对象在组件初始化时从后端加载。 在应用程序中，我尝试将 ng-bootstrap 用于角度模块。 ng-boorstrap 特别是我正在尝试实现pagination 组件。

有人可以解释一下如何放置代码以便它可以呈现例如请每页只有 10 行？ 或者给我一个参考，实现的地方。

我所做的是：

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

好的。我在 github 中找到了一个很棒的解决方案。 看看这个。 https://github.com/michaelbromley/ng2-pagination

Answer 2

这是我的工作解决方案。 ngb 分页 API：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 3

我正在寻找同样问题的答案，但似乎没有人发布明确的答案。

这是我的解决方案：

Angular 7 中使用 ngFor 的 ngbPagination

export class HomeComponent implements OnInit {


currentPage = 1;
itemsPerPage = 5;
pageSize: number;

constructor() { }

  public onPageChange(pageNum: number): void {
    this.pageSize = this.itemsPerPage*(pageNum - 1);
  }
  
  public changePagesize(num: number): void {
  this.itemsPerPage = this.pageSize + num;
}

}

<div class="container-fluid">
    <div class="col-6 input-group">
        <div class="col-5 input-group-addon">
            <ngb-pagination [collectionSize]="users.length" #numPages [pageSize]="itemsPerPage" [(page)]="currentPage" (pageChange)="onPageChange(currentPage)"></ngb-pagination>
        </div>
        <div class="col-1 input-group-addon">
            <input class="input-sm text-center" type="number" [min]="10" [max]="users.length" step="1" [(ngModel)]="itemsPerPage" (onClick)="changePagesize(pageSize)">
        </div>
    </div>
    <ul *ngIf="users">
        <li *ngFor="let user of users | slice: pageSize | slice: 0:itemsPerPage">
            <img [src]="user.avatar" alt="{{ user.avatar }}">
            <p>{{ user.id }}. {{ user.first_name }} {{ user.last_name }}</p>
        </li>
    </ul>
    <pre><span class="float-md-left">Page: {{ currentPage }} / {{numPages.pageCount}}</span><span class="float-md-right">Found items: {{ itemsPerPage }} / {{ users.length }}</span></pre>
</div>

这个解决方案也适用于Angular 6。我没有在其他版本上测试过。

如需更多信息，请查看documentation。不幸的是...它缺少有关 ngFor 迭代的重要信息。

我遇到的另一个问题是如何设置页数。我决定为那些有同样问题的人添加我的完整解决方案。我找到了这个答案here。记下上面的标识符#numPages。这是stackblitz上的live demo