Angular5完美滚动条psYReachEnd多次触发事件

我正在为我的Angular5应用程序使用ngx perfect scrollbar 5.5.12

当滚动条到达屏幕底部时，我将加载更多数据，如无限滚动

app.component.html

我不确定这在以后的版本中是否已修复，但我现在正在使用v.5.5.12

有办法解决这个问题吗？ 或者有其他方法吗？

---

谢谢。

我的项目中也有同样的问题。版本：7.1.0

所以我的解决方案是创建一些布尔变量来加载更多的项。 当您从API加载一些数据时，将其设置为true，然后设置为false

在函数中使用它的示例

onReachEnd(): void {
  if (this.isLoadingData) {
    return;
  }

  // Call the API/function for more items here
}

因为我不知道您是否有处理请求等的服务。我将使用BehaviorSubject向您展示一些示例

假设您的服务名为dataService。 我们可以在这里创建BehaviorSubject-isLoadingData

private isLoadingDataBehaviorSubject BehaviorSubject=new BehaviorSubjectfalse

由于这是一项服务，我们可以在这里创建公共可观察的： isLoadingData=this.isLoadingDataBehaviorSubject.asObservable`

现在，当我们得到所有这些后，我们可以创建函数来调用此服务中的API：

loadData(): Observable<any> {
  this.isLoadingDataBehaviorSubject.next(true);
  return this.http.get(url).pipe(
    tap((response) => {
        this.isLoadingDataBehaviorSubject.next(false);
        return response;
    }),
    catchError((error: HttpErrorResponse) => {
        this.isLoadingDataBehaviorSubject.next(false);
        return of({});
    })
  );
}

onReachEnd(): void {
  if (this.isLoadingData) {
    return;
  }

  // Call the API/function for more items here
}

loadData(): Observable<any> {
  this.isLoadingDataBehaviorSubject.next(true);
  return this.http.get(url).pipe(
    tap((response) => {
        this.isLoadingDataBehaviorSubject.next(false);
        return response;
    }),
    catchError((error: HttpErrorResponse) => {
        this.isLoadingDataBehaviorSubject.next(false);
        return of({});
    })
  );
}

ngOnInit(): {
    this.dataService.isLoadingData.subscribe(x => {
        this.isLoadingData = x;
    });
}