Бесконечная прокрутка продолжает работать до тех пор, пока все данные не будут выбраны в Angular

Question

Я работаю над бесконечной прокруткой для div, чтобы показать мою таблицу с данными. Как только прокрутка произошла на div, я прослушиваю его через HostListener. Как упоминалось ниже, код выполняется, и создается служба, и данные добавляются в таблицу, но скроллер не перемещается со своего места (я думаю, что он будет корректироваться в соответствии со вставкой данных или перемещаться немного вверх по мере вставки данных втаблица) и снова прокрутка обнаруживается HostListener и повторяется до тех пор, пока не будут получены все данные.

<div class="table-container" (scroll)="scrollHandler($event)">
.
.
.
</div>

  .table-container {
    max-height: 400px;
    overflow: auto;
  }

in My class
  @HostListener('scroll', ['$event'])
  scrollHandler(event: MouseEvent) {
    this.handleScroll(event);
  }

private canScroll(event): boolean {
    if (event.srcElement.offsetHeight + event.srcElement.scrollTop == event.srcElement.scrollHeight) {
      return true;
    }
  }

  private handleScroll(event: MouseEvent): void {
    if (event) {
      this.scrolled.emit(this.canScroll(event))
    }
  }

Может кто-нибудь сказать, что я делаю не так?