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

【问题标题】：Angular2: pagination of a component with tableAngular2：用表格对组件进行分页
【发布时间】：2017-06-19 17:24:25
【问题描述】：

我有一个 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 个元素。我怎样才能全部分页？

【问题讨论】：

标签： javascript angular pagination

【解决方案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>

【讨论】：