div/tableでのブートストラップとAngular4のページ設定

Question

Angular4プロジェクトには「カード」のリストがあり、ページあたり6枚しか表示しません。テーブルのページングを使用できますが、

<div style="position:relative;"> 
       <table class="row"> 
        <div id="jasmine_content" class="x_content col-lg-4 col-md-5 col-sm-8 col-form-label-sm" [ngbCollapse]="isCollapsed" *ngFor="let instance of entityList.list; trackBy:trackByFn; let idx=index;"> 
         <div class="card mb-2 "> 
          <div class=" card-header table table-hover table-striped"> 

           <td> 

            <ng-container *ngFor="let column of entityList.metadata.columns" [ngSwitch]="column.order" > 

             <tr *ngSwitchCase="2" >{{ entityName.toLowerCase() + '.' + column.key | translate}}&nbsp; - &nbsp; 
              {{getValue(instance, column.key) | ellipsis:200}}</tr> 
             <tr *ngSwitchCase="3" >{{ entityName.toLowerCase() + '.' + column.key | translate}}&nbsp; - &nbsp; 
              {{getValue(instance, column.key) | ellipsis:200}}</tr> 
             <tr *ngSwitchCase="5" >{{ entityName.toLowerCase() + '.' + column.key | translate}}&nbsp; - &nbsp; 
              {{getValue(instance, column.key) | ellipsis:200}}</tr> 

            </ng-container> 
           </td> 
           </div> 
          </div> 
         </div> 
        </table> 
</div> 

と私はカードを得たが、ただ1つのページに、どのように私はsimplyest方法で改ページを使用することができます

「tは（私はそれが行のANS列を待っていると思う、カードのコードはありますか？

PS：次の行を使用してページをめくる：

... 
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-striped"> 
<thead> 
       <tr> 
        <th *ngFor="let column of entityList.metadata.columns"> 
         {{ entityName.toLowerCase() + '.' + column.key | translate}} 
        </th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="let instance of entityList.list; trackBy:trackByFn; let idx=index;"> 
        <ng-container *ngFor="let column of entityList.metadata.columns" [ngSwitch]="column.type"> 
         <td *ngSwitchCase="'date'">{{getValue(instance, column.key) | date:'y/MM/dd'}}</td> 
         <td *ngSwitchCase="'text'">{{getValue(instance, column.key) | ellipsis:200}}</td> 
         <td *ngSwitchCase="'boolean'"> 
          <input type="checkbox" [checked]="getValue(instance, column.key)" disabled/></td> 
         <td *ngSwitchDefault>{{ getValue(instance, column.key)}}</td> 
        </ng-container> 
       </tr> 
      </tbody> 
     </table> 

... 

そして、私はテーブル上にラインの行と列でページ番号を付けました。あなたngfor *、HTML形式の

import { NgxPaginationModule } from 'ngx-pagination'; 

@NgModule({ 
    imports: [ 
     NgxPaginationModule 
.... 

：すべての まずそれをインストール：

npm install ngx-pagination 

がappModuleにそれを追加

Answer 1

私は私がしました、私はそれを作ったと思いますがNGX-paginantionを使用していますOT iteratoをしたいし、ページに細分化：

*ngFor="let instance of (entityList.list | paginate: { itemsPerPage:5, currentPage: p}) 

(...) 

<pagination-controls (pageChange)="p = $event"></pagination-controls> 

---

物事を簡単にするために、私はdiv要素でカードを作成しています：（entityList.listの

<table class="row"> 
<div id="jasmine_content" class="x_content col-lg-4 col-md-5 col-sm-8 col-form-label-sm" [ngbCollapse]="isCollapsed" *ngFor="let 

インスタンスを| searchFilter：search.value）; trackBy：trackerByFn; IDX =インデックスましょう; "> （ここでは.......カード......）私はNGB-ページネーションを使用してアイテム（インスタンス）、またはそのような何か ことパジネートできる方法

？