Angular2: разбиение на страницы компонента таблицей

Question

У меня есть модуль Angular2, который показывает таблицу с некоторыми данными, полученными из веб-сервиса. 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 пары «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>