Ion 3でInfiniteScrollを作成する

Question

バックエンドにはsymfony3とFosRestBundle、フロントエンドにはIonic 3を使用しています。

私は、イオニックのドキュメントに従って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; 
} 

と、これは番目のtypescriptですコードです：

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（）は似ていますが、最初は変数の結果であり、2番目は変数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); 
} 

を解決