Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/meteor/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度2-下一页分页不会触发函数为下一页加载数据_Javascript_Html_Angular_Typescript - Fatal编程技术网

Javascript 角度2-下一页分页不会触发函数为下一页加载数据

Javascript 角度2-下一页分页不会触发函数为下一页加载数据,javascript,html,angular,typescript,Javascript,Html,Angular,Typescript,我是Angular 4的新手,我一直在写分页代码。 我使用名为paginationFirst和paginationNext的单独服务分别在表中加载第一页和下一页的数据。因此,在单击第一个选项卡时,来自第一个服务的数据应通过firstPage函数加载到表中,在单击下一个选项卡时,来自第二个服务的数据应通过nextPage函数加载到表中。 第一页的数据加载正常,但单击下一个选项卡时不会加载下一页的数据。 这两个服务都工作正常,并显示正确的数据。我不想使用npm分页。 请在这方面提供帮助 HTML:

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

HTML:

服务台

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

在组件中,可以按如下方式设置值:

this.calendarTableSelected = data
但是在HTML中,您可以这样迭代

*ngFor="let item of calendarTable"

要么你不知道,要么你忘了一些代码

我找到了解决办法。下面是我的答案

                    <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>

我在这里有点困惑,你说这两个服务都工作正常,并且显示正确的数据。如果没有为下一页加载数据,您如何知道它们工作正常?如果它显示了正确的数据,这里有什么问题?@BunyaminCoskuner这些服务是用Python编写的,当它们在浏览器中运行时,它们会得到所需的响应。但从角度前端,单击下一个选项卡不会显示任何数据。理想情况下,它应该用下一页服务替换表中的数据。所以,当你们点击Next按钮并触发nextPage方法时,你们是否看到你们的请求通过网络并在开发者工具上返回你们想要的数据?@BunyaminCoskuner是的。我还附上了我的开发工具的截图。请检查我的文章最后一行的url,我刚刚添加了截图。请求正在通过网络发送。但是,当我单击“下一步”时,它会重定向到主页,而不是加载数据。您是否也可以在请求和响应中添加“网络图片”选项卡?如果它重定向到主页,我会假设它与你的服务器有关,而不是angular应用程序。那么,你能为你返回的数据制作一个控制台日志,并将其显示给我们吗?@Neha,Bunyamin问题是关于你说实际页面在哪里获得下一页错误答案@Eliseo!没有布尼亚明here@Eliseo请检查我刚刚添加的文章最后一行的截图的url。单击“下一步”,实际页面将重定向到主页。@trichetriche我已附上截图。请检查我文章的最后一行
*ngFor="let item of calendarTable"
                    <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>