web-dev-qa-db-ja.com

実装方法Bootstrap 4 for Angular 2 ngb-pagination

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

誰かがコードを置く方法を説明できます。 1ページあたり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>

enter image description here

angularng-bootstrap
9
Jozef Plachy

それが私の実用的なソリューションです。 ngb-paginationの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())
      )
  }
29
Игорь Демянюк

私はこの同じ質問に対する答えを探していましたが、誰も明確な答えを投稿していないようです。

私のソリューションは次のとおりです。

ngbPagination in ngFor in Angular 7

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の繰り返しに関する重要な情報が欠けています。

もう1つの問題は、ページ数の設定方法でした。同じ問題を抱えている人のために、完全なソリューションを追加することにしました。私はこの答えを見つけました here 。上記の識別子#numPagesに注意してください。 ライブデモ on stackblitz

5
omostan

OK。 githubで素晴らしいソリューションを見つけました。見てみな。 https://github.com/michaelbromley/ng2-pagination

0
Jozef Plachy