データベースからのデータでイオン2の無限スクロールを作成する方法

Question

アクティブなデータベースから約500人のユーザーを照会します。私はラベールとイオンフレームワークを使用しています。

ここでは、laravelを使用したクエリです。ここで

public function getUsers(Request $request) { 
    $users = DB::table('users')->where('status', $request->status)->get(); 
    return Response::json($users); 
} 

私は500のアクティブユーザーを取得し、私のビューに表示することができる午前イオン2

import { Component } from '@angular/core'; 
import { Http, Headers, RequestOptions } from "@angular/http"; 

@Component({ 
    selector: 'page-users', 
    templateUrl: 'users.html' 
}) 
export class UsersPage { 

    users: any = []; 

    constructor(
    private http: Http 
) { 
    var headers = new Headers(); 
    headers.append("Accept", 'application/json'); 
    headers.append('Content-Type', 'application/json'); 
    let options = new RequestOptions({ headers: headers }); 
    let data = { 'status': 'active'} 
    this.http.post('http://path/to/laravel/api/getUsers', data, options) 
    .subscribe(res => { 
     var jsonData = JSON.parse(res['_body']); 
     this.users = jsonData; 
    }) 
    } 
    doInfinite(infiniteScroll) { 
    // How can I do infinite scroll here??? 
    setTimeout(() => { 
     infiniteScroll.complete(); 
    }, 1000); 
    } 
} 

で私.TSコードかもしれません。

しかし、一度にデータクエリが多すぎるため、一種の遅れがあります。

クエリを最適化するために無限のスクロールを作成したいと考えています。しかし、私はそれをイオン2でどのように実装するのか分かりません。

私はスクロールするたびに10人以上のユーザーに質問します。回答は高く評価されます。

Answer 1

私のコードの1つを取り除き、いくつかの変数名を置き換えます。うまくいけば、それが意味をなすと参考になっ次のようになりますでしょう

fetchMore(event) { 
    this.myService.getMoreItems(10/*number of items to fetch*/,this.collection.length/*you might need to send the "skip" value*/).then(
     (moreItems: any[]) => { 
     if (moreItems.length > 0) { 
      this.collection = this.collection.concat(moreItems); 
     } 
     event.complete(); 
     }, 
     (err) => { 
     event.complete(); 
     } 
    ); 
    } 

myService.getMoreItems一部：

<ion-infinite-scroll (ionInfinite)="fetchMore($event)"> 
    <ion-infinite-scroll-content></ion-infinite-scroll-content> 
</ion-infinite-scroll> 

あなたはあなたの.TSでこのようなものが必要になります。

はあなたのhtmlでこれを持っていると仮定すると、戻り値の型はPromise<any>で、これはHTTP要求を行います。私はあなたが考えを持っていると思う。