如何限制来自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升级后对您有帮助，

模板中的内容（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;
}

Answer 2

您不能从离子方面进行控制。但是，如果您能够修改api，则可以创建一个可以返回特定数量数据的api。例如，在第一个请求中，api返回0到10条记录。然后再次请求获取11到20条记录，依此类推。要实现此功能，您可以使用Ionic InfiniteScroll。