javascript - Angular 2 - 分页下一个不会触发加载下一页数据的函数

Question

我是 Angular 4 的新手，我一直在编写分页代码。我使用名为“paginationFirst()”和“paginationNext()”的单独服务分别加载表中第一页和下一页的数据。因此，单击“First”选项卡时，应通过“firstPage()”函数将来自第一个服务的数据加载到表中，单击“Next”选项卡时，应将来自第二个服务的数据加载到表中通过“nextPage()”函数。第一页的数据加载正常，但单击下一个选项卡时不会加载下一页的数据。这两项服务都工作正常并显示正确的数据。我不想使用 npm 分页。请在这方面提供帮助。

HTML:

<div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="align-right">VALUE</th>
            </tr>
        </thead>
        <tbody>
           <tr *ngFor="let item of calendarTableSelected">
              item.value
           </tr>
       </tbody>
    </table>
</div>

<div class="pagination" *ngIf="tableDiv">
    <div>
        <a href="#" class="active" (click)="firstPage()" >First</a>
    </div>
    <div>
        <a href="#" (click)="previousPage()">Prev</a>
    </div>
    <div>
        <a href="#" (click)="nextPage()">Next</a>
    </div>
    <div>
        <a href="#" (click)="lastPage">Last</a>
    </div>
</div>

组件.ts

firstPage(){
     this.calendarService.paginationFirst().subscribe(data => 
     this.calendarTableSelected = data);
}

nextPage(){
     this.calendarService.paginationNext().subscribe(data => 
     this.calendarTableSelected = data);
}

服务.ts

public paginationNext(){
    return this.http.get(environment.serverUrl+ '/api/nextpage')
               .map((responsePage:Response) => responsePage.json())
               .catch((err) => {
                   console.log('Error while getting response from service: '+ err);
                   return Observable.throw(err)
                 })
}

public paginationFirst() {
    return  this.http.get(environment.serverUrl+'/api/firstpage')
                  .map((resService4:Response) => resService4.json())
                  .catch((err) => {
                      console.log('Error while getting response from service: '+ err);
                     return Observable.throw(err)
              })
}

Please click here to see the screen from the developer tools displaying that the service is returning response

Screenshot for the network tab

Answer 1

我已经找到解决办法了。下面我贴出我的答案。

                    <div>
                        <button class="active" (click)="firstPage()" >First</button>
                    </div>


                    <div>
                        <button (click)="previousPage()">Prev</button>
                    </div>

                    <div>
                        <button (click)="nextPage()">Next</button>
                    </div>

                    <div>
                        <button (click)="lastPage()">Last</button>
                    </div>