2017-04-14 11 views
-2

私はページングの問題があります。データベースには21個のオブジェクトがありますので、それらを取得すると、今はページングで表示したい、すべてのものはうまくいきますが、ページングモジュールには行数それはページごとに10行を取っていない4ページangular2のページングngxブートストラップ

export class GroupComponent implements OnInit { 


public maxSize:number = 5; 
    bigTotalItems:number = 175; 
    bigCurrentPage:number = 1; 
    numPages:number = 0; 
    itemsPerPage = 4; 
    groups : any; 
    myVar:Boolean=false; 

constructor(private groupeService:DataServiceService) { 
    parent.displayGroupeIcon(); 
    } 

    ngOnInit() { 
    this.getListGroups(); 
    } 

getListGroups(){ 

    this.groupeService.getGroupsByPageAndSize(this.bigCurrentPage-1,this.itemsPerPage).subscribe(groups => { 
    this.groups=groups; 
    this.numPages=groups.totalPages; 
    this.bigTotalItems=groups.totalElements; 
    this.myVar = true; 
      }); 

} 

あたりと同様にデフォルトで表示されるようにすることで、このテンプレート

<table class="table table-striped"> 
      <thead> 
      <tr> 
      <th >Identifiant </th> 
       <th >Nom </th> 
       <th >Image</th> 

       <th ></th> 
       <th ></th> 
      </tr> 
      </thead> 
      <tbody *ngIf="myVar"> 

      <tr *ngFor="let groupe of groups.content" > 
      <td >{{groupe.idGroupe}} </td> 
      <td >{{groupe.nom}} </td> 
      <td >{{groupe.imageUrl}}</td> 
    <td ><button class="btn btn-warning" >Update <i class="fa fa-cog" aria-hidden="true"></i></button></td> 
      <td ><button class="btn ink-reaction btn-danger">Delete <i class="fa fa-trash-o" aria-hidden="true"></i></button></td> 
      </tr> 



     </tbody> 
     </table> 



<div class="col-md-6"> 
    <pagination [totalItems]="bigTotalItems" [(ngModel)]="bigCurrentPage" [maxSize]="maxSize" class="pagination-sm" 
       [boundaryLinks]="true" [rotate]="false" (click)="getListGroups()"></pagination> 
</div> 
bigTotalItems : {{bigTotalItems| json}} 

numPages : {{numPages|json}} 

Heeelpのpleaseeeとアドバイスに感謝します。 enter image description here

答えて

0

私はちょうどページネーションの私のセレクタで[itemsPerPage] = "itemsPerPage" ディレクティブを追加し、それをRESOLV

関連する問題