Angular5 Perfect Scrollbar psYReachEnd запускает событие несколько раз - PullRequest
Новая
       11

Angular5 Perfect Scrollbar psYReachEnd запускает событие несколько раз

0 голосов
/ 18 февраля 2019

Я использую ngx-perfect-scrollbar 5.5.12 для моего приложения Angular5.

Когда полоса прокрутки достигнет нижней части экрана, я собираюсь загрузить больше данных, таких как бесконечная прокрутка.

app.component.html 

<perfect-scrollbar
    [config]="config"
    (psYReachEnd)="onReachEnd()">

Но проблема в том, что он запускает метод несколько раз .

app.component.ts 

  onReachEnd() {
    console.log('log several times here');
  }

Я не уверен, исправлено ли это в более поздних версиях, но сейчас я использую v.5.5.12.

Есть ли способ исправитьэтот?Или какие-то альтернативные способы?Спасибо.

1 Ответ

0 голосов
/ 15 марта 2019

У меня была такая же проблема в моем проекте.Версия: "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<boolean> = new BehaviorSubject(false);

и, поскольку это сервис, мы можем создать здесь public observable: 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({});
    })
  );
}

И вы также должны подписаться на эту isLoadingData внутри вашего компонента и установить его значение,Самый простой способ, например: 

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