保存変数に値をサブスクライブし、私はこのような検索サービスを持っている時

Question

で彼らに10を表示::

public getAllData(): Observable<UInfo> { 
return this.http.get<any>('/assets/data/info-data.json'); 
} 

そして、私のcomponent.ts上の私は、この持っている：

public getData(){ 
this.searchService.getAllData().subscribe(results => { 
    this.infoData= results['data']; 
    this.displayData=this.infoData.slice(0,10); 
}); 

を}

Andn私はInitでgetData（）を呼び出します。 私がする必要があるのは、一度に10行を表示するためです.10個を追加するには、infoData（0,10）と各スクロールをスライスする必要があります。

onScroll(){ 
     if(this.allInfoData.length < this.infoData.length){ 
    let len=this.allInfoData.length; 
    for(this.i=len;this.i<=len+20;this.i++){ 
    this.allInfoData.push(this.infoData[this.i]); 
    } 
    } 
} 

しかし、事はngOnInit上で、getAllData機能はすでに存在しているすべての行を返します。

これは私が試したものです。

変数にすべてのデータを格納するにはどうすればよいですか？onInitでは10を表示し、その後はすべてのスクロールでさらにデータを追加します。

<div class="col-md-11 tableDiv" infiniteScroll [infiniteScrollDistance]="2" 
    [infiniteScrollThrottle]="100" (scrolled)="onScroll()"> 
<div > 
<table class="table table-striped"> 
    <thead class="table-bordered"> 
    <tr> 
     <th>Date</th> 
     <th>Name</th> 
     <th>Color</th>   
    </tr> 
    </thead> 
    <tbody> 
<tr *ngFor="let row of displayData"> 
     <td>{{row.Date| date:'MM/dd/yy'}} </td> 
     <td>{{row.Name}}</td> 
     <td>{{row.Color}}</td>   
    </tr> 
    </tbody> 
</table> 
</div> 

Answer 1

すべての結果を1つの変数に格納し、表示された結果を別の変数に格納することができます。あなたは

onScroll(){ 
    let currentLength = this.displayData.length; 

    // you probably want some more logic here to determine if the user is near the bottom of the results 
    if(currentLength < this.infoData.length){ 
     this.displayData = this.infoData.slice(0, currentLength + 10); 
    } 
}