使用 Ionic 3 制作 InfiniteScroll

Question

我在后端使用 symfony3 和 FosRestBundle，在前端使用 Ionic 3。

我已经按照 Ionic 的文档制作了一个 InfiniteScroll，但我没有做到。仅显示加载文本和微调器，未推送任何数据。

这是后端操作：

/**
 * @Rest\Get(
 *     path="/articles",
 *     name="api_article_list"
 * )
 * @Rest\QueryParam(
 *     name="limit",
 *     requirements="\d+",
 *     default="5",
 *     description="Maximum element per page"
 * )
 * @Rest\QueryParam(
 *     name="offset",
 *     requirements="\d+",
 *     default="0",
 * )
 * @Rest\View(StatusCode=201, serializerGroups={"list"})
 *
 */
public function listAction(Request $request, ParamFetcherInterface $paramFetcher)
{

    $em = $this->getDoctrine()->getManager();

    $articles = $em->getRepository('AppBundle:Article')->findBy(
        array(),
        array('id' => 'desc'),
        $paramFetcher->get('limit'), $paramFetcher->get('offset')
    );

    return $articles;
}

这是打字稿代码：

export class NewsPage {

results = [];
moreData = [];

constructor(public navCtrl: NavController, private http: Http, public loadingCtrl: LoadingController) {
    this.getData();
}

getData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit +'&offset=' + this.offset )
        .map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

loadMoreData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit +'&offset=' + this.offset )
        .map(res => res.json()).subscribe(data => {
        this.moreData = data;
    });
}

doInfinite(infiniteScroll) {
    this.offset += 2;

    this.loadMoreData();

    setTimeout(() => {

        infiniteScroll.complete();
    }, 500);
}

如您所见，getData() 和 loadMoreData() 这两个函数很相似，但第一个用于变量结果，第二个用于变量 moreData。这只是我的想法，我怀疑这是不是一个正确的方法。

这是 html 代码：

<ion-card *ngFor="let result of results; let i = index">
   <ion-item> {{result.id }}</ion-item>
//............
</ion-card>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">

  <ion-infinite-scroll-content loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

Answer 1

已解决

results = [];
limit: number = 5;
offset: number = 0;

//****

getData() {
    this.http.get(Globals.baseUrl + 'articles')
        .map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

loadMoreData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit + '&offset=' + this.offset)
        .map(res => res.json()).subscribe(data => {
        for (let item of data) {
            this.results.push(item);
        }
    });

}

doInfinite(infiniteScroll) {
    this.offset += 5;
    setTimeout(() => {
        this.loadMoreData();
        infiniteScroll.complete();
    }, 500);
}

使用 Ionic 3 制作 InfiniteScroll

Make InfiniteScroll with Ionic 3

typescript

symfony-3.2

ionic3