Javascript 角度2：组件与表的分页

我有一个Angular2模块，它显示一个表，其中包含从WebService检索到的一些数据。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')
        )
    }
}

  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"));    
 }  

日期
台面
{{message.sendDate}
{{message.text}
导出类MessageListComponent实现OnInit{
消息：消息[]；
恩戈尼尼特（）{
this.messages=[]；
this.myServices.getMessages（'0'）。订阅(
messages=>this.messages=消息，
错误=>警报（错误），
（）=>console.log（'ok'）
)
}
}

getMessage参数“0”为我提供了第一个结果，所以目前我只能显示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')
        )
    }
}

  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>

先例


{{i+1}}


suivant

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

<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')
        )
    }
}

  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>

先例


{{i+1}}


suivant