如何使用angular2-infinite-scroll模塊一次顯示10個元素？

Question

我正在使用角度2無限滾動模塊，我想一次顯示10個元素，當用戶點擊scrollDown（）時，必須顯示接下來的10個元素，並且應該相應地更新滾動條，嘗試各種方法，但迄今沒有任何工作，任何形式的幫助將不勝感激。 謝謝。

這是我的代碼。

`infinite-scroll 
      [infiniteScrollDistance]="2" 

      [infiniteScrollThrottle]="500" 

      [scrollWindow]="false" 
      (scrolled)="onScrollDown()" 
      (scrolledUp)="onScrollUp()" 

    style="overflow: auto;height:250px;width:350px" > 
      <div class="scrollBar"> 
      <ul *ngFor="let item of list" > 
      <li>{{item}}</li> 
      </ul> 
      </div>` 

Answer 1

您可以使用片管，以限制你在屏幕上看到的項目。

你需要一個變量來保持屏幕上顯示的項目總數

一個簡單的例子是這樣的：

<div> 
    <h2 (click)="limit=limit+2">more</h2> 
    <ul> 
    <li *ngFor="let item of list | slice:0:limit">{{item}}</li> 
    </ul> 
    {{limit}} 
</div> 

你可以看到它的工作here。

在你的情況下，我想你可以使用（滾動）提高限額。

<div infinite-scroll 
      [infiniteScrollDistance]="2" 

      [infiniteScrollThrottle]="500" 

      [scrollWindow]="false" 
      (scrolled)="limit=limit+10" 
      (scrolledUp)="onScrollUp()" 

    style="overflow: auto;height:250px;width:350px" > 
      <div class="scrollBar"> 
      <ul *ngFor="let item of list | slice:0:limit" > 
      <li>{{item}}</li> 
      </ul> 
      </div>