如何在角度 5 中实现无限滚动分页? [英] how to implement infinite scroll pagination in angular 5?

问题描述

我需要在 angular 5 中实现无限滚动分页.我尝试了无限滚动，但它无法正常工作.我需要显示前 10 个帖子及其评论，滚动后 10 个评论需要再次调用服务(10 个帖子)并将数据附加到现有帖子中.

解决方案

你可以使用ngx-infinite-scroll.

npm install ngx-infinite-scroll --save

查看演示 plnkr.

在您的组件模板中:

<p *ngFor="让 i 个数组">{{ 一世 }}</p>

在您的组件控制器中:

 onScrollDown (ev) {console.log('向下滚动！！', ev);//添加另外 10 个项目const start = this.sum;this.sum += 10;this.appendItems(start, this.sum);this.direction = '向下'}onUp(ev) {console.log('向上滚动！', ev);const start = this.sum;this.sum += 10;this.prependItems(start, this.sum);this.direction = '向上';}

这是通过一个简单的数据服务完成的，但您可以实现从数据库中检索数据的自定义方法.例如:

//第 1 页db.comments.find().limit(10)//第2页db.comments.find().skip(10).limit(10)//第 3 页db.comments.find().skip(10).limit(10)

I need to implement infinite scroll pagination in angular 5. I have try infinite scroll but its not working properly. i need to show first 10 post with their comments, after scroll that 10 comment need to call service (10 post) again and append the data with existing posts.

解决方案

You can use ngx-infinite-scroll.

npm install ngx-infinite-scroll --save

See demo plnkr.

In your component template:

<div class="search-results"
     data-infinite-scroll
     debounce
     [infiniteScrollDistance]="scrollDistance"
     [infiniteScrollUpDistance]="scrollUpDistance"
     [infiniteScrollThrottle]="throttle"
     (scrolled)="onScrollDown()"
     (scrolledUp)="onUp()">
  <p *ngFor="let i of array">
    {{ i }}
  </p>
</div>

In your component controller:

 onScrollDown (ev) {
    console.log('scrolled down!!', ev);

    // add another 10 items
    const start = this.sum;
    this.sum += 10;
    this.appendItems(start, this.sum);

    this.direction = 'down'
  }

  onUp(ev) {
    console.log('scrolled up!', ev);
    const start = this.sum;
    this.sum += 10;
    this.prependItems(start, this.sum);

    this.direction = 'up';
  }

This is done with a simple data service, but you can implement a custom method retrieving data from database. For example:

// Page 1
db.comments.find().limit(10)

// Page 2
db.comments.find().skip(10).limit(10)

// Page 3
db.comments.find().skip(10).limit(10)

这篇关于如何在角度 5 中实现无限滚动分页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！