Angular2：テーブルでのコンポーネントのページ設定

Question

私は、weberviceから取得したいくつかのデータを含むテーブルを示すAngular2モジュールを持っています。 Webserviceは時間当たり30の結果を返します（引数としてインデックスを取る）ので、ユーザーがインデックスをクリックしたときにモジュールが新しいデータをダウンロードし、ユーザーに表示するような並べ替えをモジュールに実装する必要があります。 は今、私は、このコンポーネント持っているために：今の私は唯一の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」、私の最初の結果を与えます。 どのようにページングすることができますか？

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>