如何在 Angular 4 中实现向下滚动分页

Question

我是新人angular 4.我想在angular实现滚动分页 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

由于新功能和兼容性，我建议使用 ngx-infinite-scroll 而不是 angular2-infinite-scroll 使用 AOT。

首先你需要指定 scrollWindow 属性如果你不使用整个 window 而使用 overflow: scroll 属性模拟可滚动 div。同样在您的 ScrollComponent class 中，您需要 item 作为 class 的属性而不是变量，所以你应该使用 public item 而不是 let item.

如果列表的大小已知，那么您可以利用 infiniteScrollDisabled 来提高性能。

此外，将多个事物命名为 item 而将单个事物命名为 item 在语法上是不正确的。我要去将 item 更改为 items （您可以在模板 html 的 ngFor 循环中看到）

@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;
        }
    }
}

当您向下滚动列表时，您现在将成功看到一条警告消息。

这是上述代码的工作 plunker。

如何在 Angular 4 中实现向下滚动分页

How to implement on scrolldown pagination in Angular 4

scroll-paging

angular