Angular 2 - 下一个分页不会触发加载下一页数据的功能答案

【问题标题】：Angular 2 - Pagination next is not triggering the function to load the data for the next pageAngular 2 - 下一个分页不会触发加载下一页数据的功能
【发布时间】：2017-12-13 07:48:52
【问题描述】：

我是 Angular 4 的新手，我一直在编写分页代码。我正在使用名为“paginationFirst()”和“paginationNext()”的单独服务分别在表中加载第一页和下一页的数据。因此，单击“第一个”选项卡时，应通过“firstPage()”函数将来自第一个服务的数据加载到表中，单击“下一步”选项卡时，应将来自第二个服务的数据加载到表中通过“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

【问题讨论】：

我在这里有点困惑，你说“两个服务都工作正常并显示正确的数据”。如果没有为nextPage 加载数据，你怎么知道它们工作正常？而如果是“显示正确的数据”，这里有什么问题？
@BunyaminCoskuner 这些服务是用 Python 编写的，当它们在浏览器中运行时，它们会达到所需的响应。但是从 Angular 前端，单击下一个选项卡不会显示任何数据。理想情况下，它应该用下一页服务替换表的数据。
好的，现在我明白了。那么，当您点击Next 按钮并触发nextPage 方法时，您是否看到您的请求通过网络并返回您想要的数据（在开发人员工具上）？
@BunyaminCoskuner 是的。我还附上了我的开发者工具的截图。请检查我刚刚为屏幕截图添加的最后一行帖子中的网址。该请求正在通过网络。但是当我点击下一步时，它会重定向到主页而不是加载数据
您能否在“网络”选项卡的图片中添加您的请求及其响应？如果它重定向到主页，我会假设它与您的服务器有关，而不是 Angular 应用程序。

标签： javascript html angular typescript

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

【讨论】：

【解决方案2】：

在您的组件中，您可以这样设置值：

this.calendarTableSelected = data

但是在你的 HTML 中，你会像这样迭代

*ngFor="let item of calendarTable"

要么你不知道，要么你忘记了一些代码！

【讨论】：

好的，您能否将您返回的数据制作一个控制台日志，并展示给我们？
@Neha，Bunyamin 的问题是关于你说的实际页面在哪里获得下一页
错误答案@Eliseo！这里没有本雅明
@Eliseo 请检查我刚刚添加的帖子最后一行中屏幕截图的网址。实际页面只是在单击下一步时重定向到主页。
@trichetriche 我附上了截图。请查看我帖子的最后一行