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

1 个答案: