如何在 IONIC 3 中限制来自 API 的结果

Question

我正在做一个项目，在这个项目中我必须进行 HTTP 调用，在该调用中我得到一个长度为 60+ 的结果数组并且加载需要很多时间。

如何在第一次加载时限制结果并显示 20 个数组的列表，然后向下滚动其他 20 个等等？

这是我的 .ts 文件

    getUserList() {
        this.showLoader();
        this.authService.getData(this.search, "search")
          .then((result) => {
            let yourString = typeof result == 'object' && result["_body"] ? result["_body"] : [];
            let res = yourString.substring(1, yourString.length - 1);
            this.hideLoader();
            this.response = JSON.parse(res);
            console.log(this.response);
          }, (err) => {
            console.log(err);
          });
      }

这是 console.log(this.response)

我怎样才能做到这一点？

Answer 1

您无法从离子侧进行控制。但是如果你能够修改 api 那么你可以创建一个 api 可以 return 特定数量的数据。例如在第一个请求中 api returns 0 到 10 条记录。然后第二次请求获取 11 到 20 条记录，依此类推。要实现此功能，您可以使用 Ionic InfiniteScroll.

Answer 2

您必须以 returns 导致每次滚动的方式自定义您的 API。让我展示一个示例代码。希望这会在 API 升级后对您有所帮助，

在模板中提及 (ionScrollEnd)

<ion-content (ionScrollEnd)="logScrolling($event)">

ts文件

将变量声明为 current_page = 0;

logScrolling(event)
{
 this.book_details();
}
book_details()
{
sendData= {'name':'Test'}
this.myservice.online_service(this.funcName, sendData).subscribe(response => {
    if ( response.status === 'success' && response.data.length > 0) {
      this.bookDetails = this.bookDetails.concat(response.data);
      ++this.current_page;
}

如何在 IONIC 3 中限制来自 API 的结果

How to limit the result coming from API in IONIC 3

ionic-framework

ionic3

在模板中提及 (ionScrollEnd)

ts文件