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>