角4のスクロールダウンページネーションでの実装方法

Question

私はアングル4で新しいです。アングル4でスクロールページングを実装したいと思います。最初は20個のレコードを表示したいと思います。 スクロールダウンした後、私は次の20を表示したい。私はリストの最後まで同じことをする。

"angular2-infinite-scroll"を使って実装しようとしました。最初の20レコードだけでなくスクロール・データを最初に表示することはできません。

コンポーネントファイル：

import { Component, OnInit } from '@angular/core'; 
import { InfiniteScrollModule } from 'angular2-infinite-scroll'; 

    @Component({ 
     selector: 'app-scroll', 
     templateUrl: `./scroll.component.html`, 
     styleUrls: ['./scroll.component.css'] 
    }) 
    export class ScrollComponent implements OnInit { 

    let item = [{ 
     "Name": "XYz Compnay" 
    }, 
    { 
     "Name": "XYz Company1" 
    }, { 
     "Name": "XYz Company2" 
    }, { 
     "Name": "XYz Company3" 
    }, { 
     "Name": "XYz Company4" 
    }, { 
     "Name": "XYz Company5" 
    }]; 
     constructor() {} 
     ngOnInit() {} 

     onScroll() { 
     alert('scrolled!!');  
     } 

    } 

HTMLファイル：

<div 
     infinite-scroll 
     [infiniteScrollDistance]="2" 
     [infiniteScrollThrottle]="10" 
     (scrolled)="onScroll()" 
     > 
     <p *ngFor="let items of item"> 
     {{items.Name}} 
     </p> 
    </div> 

、誰もがそれについて持つ場合は、同じ共有してください。

Answer 1

をangular2-infinite-scrollに対して使用することをおすすめします。新機能と互換性のために、 とAOTを使用してください。

まず、ウィンドウ全体を使用せず、overflow: scroll プロパティを使用してスクロール可能divをエミュレートする場合は、scrollWindowプロパティを指定する必要があります。 ScrollComponentクラスでは、itemをクラス のプロパティとして持つ必要があり、変数ではないため、let itemの代わりにpublic itemを使用する必要があります。

リストのサイズがすでにわかっている場合は、パフォーマンスを向上させるためにinfiniteScrollDisabledを利用できます。

また、文法上、複数のものにitemという名前を付けて、単一のものをitemと呼びます。私はあなたのリストを下にスクロールするときに、今成功し、警告メッセージが表示されます

@Component({ 
    selector: 'my-app', 
    styles: [` 
    .search-results { 
     height: 100px; 
     overflow: scroll; 
    } 
    `], 
    template: ` 
    <div class="search-results" 
    infiniteScroll 
    [infiniteScrollDistance]="2" 
    [infiniteScrollThrottle]="50" 
    (scrolled)="onScroll()" 
    [infiniteScrollDisabled]="isFullListDisplayed" 
    [scrollWindow]="false"> 
     <p *ngFor="let item of itemsToShow; let i = index"> 
     {{i + ' ' + item.Name}} 
     </p> 
    </div> 
    ` 
}) 
export class AppComponent { 
    private noOfItemsToShowInitially: number = 5; 
    // itemsToLoad - number of new items to be displayed 
    private itemsToLoad: number = 5; 
    // 18 items loaded for demo purposes 
    private items = [ 
     { 
      "Name": "XYz Company0" 
     }, 
     { 
      "Name": "XYz Company1" 
     }, 
     { 
      "Name": "XYz Company2" 
     }, 
     { 
      "Name": "XYz Company3" 
     }, 
     { 
      "Name": "XYz Company4" 
     }, 
     { 
      "Name": "XYz Company5" 
     }, 
     { 
      "Name": "XYz Company6" 
     }, 
     { 
      "Name": "XYz Company7" 
     }, 
     { 
      "Name": "XYz Company8" 
     }, 
     { 
      "Name": "XYz Company9" 
     }, 
     { 
      "Name": "XYz Company10" 
     }, 
     { 
      "Name": "XYz Company11" 
     }, 
     { 
      "Name": "XYz Company12" 
     }, 
     { 
      "Name": "XYz Company13" 
     }, 
     { 
      "Name": "XYz Company14" 
     }, 
     { 
      "Name": "XYz Company15" 
     }, 
     { 
      "Name": "XYz Company16" 
     }, 
     { 
      "Name": "XYz Company17" 
     } 
    ]; 
    // List that is going to be actually displayed to user 
    public itemsToShow = this.items.slice(0, this.noOfItemsToShowInitially); 
    // No need to call onScroll if full list has already been displayed 
    public isFullListDisplayed: boolean = false; 

    onScroll() { 
     if (this.noOfItemsToShowInitially <= this.items.length) { 
      // Update ending position to select more items from the array 
      this.noOfItemsToShowInitially += this.itemsToLoad; 
      this.itemsToShow = this.items.slice(0, this.noOfItemsToShowInitially); 
      console.log("scrolled"); 
     } else { 
      this.isFullListDisplayed = true; 
     } 
    } 
} 

（あなたは、テンプレートのHTMLでngForループでそれを見ることができます）itemsにitemを変更する をつもりです。

上記のコードの作業plunkerがあります。