如何在Angular7中实现无限滚动分页？答案

【问题标题】：How to implement infinite-scroll pagination in Angular7?如何在Angular7中实现无限滚动分页？
【发布时间】：2019-08-06 16:48:31
【问题描述】：

我有一个要发送的带有参数的对象。
所以 ngOnInit 工作，但我需要 onScrollDown 添加到我的参数pageNumber + 1 每次我滚动。
我怎样才能做到这一点？

questionListParams = {
    pageNumber: 1,
    pageSize: 10,
};


ngOnInit() {
    this.questionsHttpRequests.getQuestions(this.questionListParams).subscribe((response) => {
        this.listOfQuestions = response;
    });
}


onScrollDown() {
    this.questionsHttpRequests.getQuestions((this.questionListParams)).subscribe((response) => {
        this.listOfQuestions.push(...response);
    });
}

【问题讨论】：

this.questionListParams.pageNumber++?
这不是那么简单）它不起作用。
您问“我需要 onScrollDown 添加到我的参数 pageNumber + 1”。那是做什么的。如果不是这样，您的实际问题/问题是什么？
我认为他想实现页面的无限滚动。当用户滚动时，它会自动获取下一页@JB Nizet
如果您的服务器正在返回一个新的非重叠集合，那么您应该能够使用 JavaScript concat 方法 this.listOfQuestions.concat(response) 将其添加到现有集合中。您需要确保新记录集是增量的。但是，我不建议对每个向下滚动事件执行另一个 http 请求。除了微不足道的情况外，这对于任何事情都将是非常不高效的。您最初应该真正加载所有数据，然后滚动才会起作用。如果集合太大，您可以异步执行初始调用并将数据分页。

标签： angular pagination angular7 infinite-scroll

【解决方案1】：

您可以在拨打电话之前或之后递增。

onScrollDown() {
// Before
this.questionListParams.pageNumber++; 
 this.questionsHttpRequests.getQuestions((this.questionListParams)).subscribe((response) => {
        this.listOfQuestions.push(...response);
    });
// Or after
this.questionListParams.pageNumber++; 
}

【讨论】：