Question

我有分页的问题首先我在数据库中有21个对象所以当我得到它们时我想用刚才的分页显示它们，所有的东西都很好但我认为分页模块有一些行默认显示是比如它每页需要10行而不是每页4行

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并感谢您的建议。

Answer 1

我解析它我只是在我的分页选择器中添加[itemsPerPage] =“itemsPerPage”指令

用于angular2的分页ngx bootstrap

1 个答案: