角度2 ngbページネーションにブートストラップ4を実装する方法

Question

私はテーブルがあるcomponentのAngular2アプリを持っています。 テーブルは*ngForディレクティブによって生成されます。 tableの各行は、コンポーネントの初期化時にバックエンドからロードされている9個のフィールドを持つオブジェクトです。 私は角度モジュールにng-bootstrapを使用しようとしています。 ng-boorstrap 特に、paginationコンポーネントを実装しようとしています。

誰かがコードをどのように記述すればそれをレンダリングするか説明できますか？ 1ページあたり10行しかない？または実装が行われた参照を私に教えてください。

私が行っていることである。

• 私は私のコンポーネントだけでなく、（カスタムページネーションを使用するために必要な）NgbPaginationConfigモジュールを宣言しています、私のモジュールへNgbModuleの参照を入れて

• を置きますこの

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

  のような私componentの観点ngb-paginationコード

Answer 1

これは私の実用的な解決策です。 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 2

[OK]をクリックします。私はgithubですばらしい解決策を見つけました。 それをチェックしてください。 https://github.com/michaelbromley/ng2-pagination