角度4の無限スクロールでサーバーからjsonデータを取得する方法は？

Question

私は角度4で新しいです。私は角度で無限のスクロールを実装したい、スクロールdivの後に最初の10項目を取得するためにhttp呼び出しをしたい、次の10項目を取得し、最初の配列に追加するhttp要求を呼び出す。 どうすればいいですか？

Answer 1

あなたは次にあなたが次の10件のレコードをロードする必要があり、既存のアレイにそれらを追加onScroll()を実装例については、このライブラリhttps://www.npmjs.com/package/ngx-infinite-scroll

<div infiniteScroll 
      [infiniteScrollDistance]="2" 
      [infiniteScrollThrottle]="50" 
      (scrolled)="onScroll()"> 
     </div> 

を使用することができます。私は同じだった

let data = []; 
    let pageNumber =1; 


    onScroll(event) { 

     myservice.getdata(pageNumber).subscribe(elements 
     => { 
      this.data.concat(elements); 
      pageNumber++ 
     }) 

    } 

Answer 2

こんにちは私は、アイデアや使用などのuを与えますあなたがngx-infinite-scrollを使用している場合は、https://github.com/orizens/ngx-infinite-scrollの手順に従って、モジュールをapp.module.tsにインポートします。

import { InfiniteScrollModule } from 'ngx-infinite-scroll'; 

@NgModuleで

その後：あなたは複数のモジュールと連携して、特定のモジュールで使用したい場合は

@NgModule({ 
imports:[ BrowserModule, InfiniteScrollModule ], 
declarations: [ AppComponent, ], 
bootstrap: [ AppComponent ] 
}) 

私の場合などは、そのモジュールでそれをインポートします。

Answer 3

：あなたはデータ配列へのごscrollイベントのサービスやconcateデータを呼び出すことができます https://www.npmjs.com/package/angular2-infinite-scroll

<div (window:scroll)="onScroll($event)"> 
     <li *ngFor="let item of data">{{data}}</li> 
     ... 
    </div> 

：