Angular2：使用表格对组件进行分页

Question

我有一个Angular2模块，显示一个表，其中包含从webervice检索到的一些数据。 Webservice每次给我30个结果（以索引作为参数），所以我需要在我的模块上实现一种分页，当用户点击索引时，模块下载新数据并将其显示给用户。 现在我有这个组件：

<table border="1" style="width:100%" *ngIf="messages" >
   <tr>
      <th>Date</th>
      <th>Mesage</th>
   <tr>
   <tr  *ngFor="let message of messages">
      <td>{{message.sendDate}}</td>
      <td>{{message.text}}</td>
   </tr>
 </table>

export class MessageListComponent implements OnInit {
    messages: Message[];

    ngOnInit() {
        this.messages = [];

        this.myServices.getMessages('0').subscribe(
             messages => this.messages = messages,
             error => alert(error),
             () => console.log('ok')
        )
    }
}

getMessage param'0'给我第一个结果，所以现在我只能显示30个元素。 我怎么能分页呢？

Answer 1

这是我使用的：在组件中：

  ngOnInit(){
  this.exampleService.getAll(this.currentPage,10).subscribe(res=>{
                                                this.result=res.content;
                                                this.pages=new Array(res.totalPages);
                                                this.isFirst=res.first;
                                                },
                                                   error=> this.hasError("Erreur Cote Serveur"));
}

next(){
        this.exampleService.getAll((++this.currentPage),10).subscribe(res=>{
                                                this.brandsList=res.content;
                                                this.pages= new Array(res.totalPages);
                                                this.isFirst=res.first;
                                                this.isLast=res.last;
                                                },
                                                   error=> this.hasError("Erreur Cote Serveur"));    
}
previous(){
        this.exampleService.getAll((--this.currentPage),10).subscribe(res=>{
                                                this.brandsList=res.content;
                                                this.pages=new Array(res.totalPages);
                                                this.isFirst=res.first;
                                                this.isLast=res.last;
                                                },
                                                   error=> this.hasError("Erreur Cote Serveur"));    
}

getPage(page:number){
        this.exampleService.getAll(page,10).subscribe(res=>{
                                                this.currentPage=page;
                                                this.brandsList=res.content;
                                                this.pages=new Array(res.totalPages);
                                                this.isFirst=res.first;
                                                this.isLast=res.last;
                                                },
                                                   error=> this.hasError("Erreur Cote Serveur"));    
 }  

并在模板中：

        <nav>
          <ul class="pagination">
            <li [class]="isFirst?'disabled':''" class="page-item"><a class="page-link btn"  (click)="previous()">precedent</a></li>
            <ul *ngFor="let page of pages; let i= index" class="pagination">
                    <li    [class]="i===currentPage?'active':''"     class="page-item active">
                                <a class="page-link btn"  (click)="getPage(i)" >{{i+1}}</a>
                    </li>
            </ul>
            <li [class]="isLast?'disabled':''" class="page-item"><a class="page-link btn" (click)="next()" >suivant</a></li>
          </ul>
        </nav>