ngx-datatable прокрутка на стороне сервера - таблица постоянно вызывает API, когда доходит до последнего элемента и данные никогда не обновляются - PullRequest
Новая
       61

ngx-datatable прокрутка на стороне сервера - таблица постоянно вызывает API, когда доходит до последнего элемента и данные никогда не обновляются

1 голос
/ 28 апреля 2020

родительский компонент вызывает API и передает данные в сервис sharedData и подписывается на него. Таким образом, каждый раз, когда вносятся изменения в набор дат, он автоматически обновляется в родительском компоненте. 

ngOnInit() {
    this.initialise();
  }

  initialise() {
    this.dataShareService.setDataFilter(null);
    this.loading = true;
    this.assetService.table_data().subscribe(res => {

      this.dataShareService.setEnviromentData(res);
      this.dataShareService.enviromeData.subscribe(r => {
         this.loading = false;

         this.data = r;
         let i = 0;
         console.log('just a ocunt', i++)
        this.searchValue = r['results'].map((val: any) => {
          return val.name;
        });

       this.totalItems = this.data['results'].length;

      this.loading = false;

    }, err => {
      console.log(err);
    });
  }

Затем эти данные передаются дочернему компоненту - таблице данных 

      <data-table
         *ngIf="!loading"
          class="flex_display_centre"
          [showTable]="showTable"
           [columns]="columns"
           [limit]="limit"
           [data]="data">
   </data-table>

Я функция onScroll to, чтобы получить координаты почему. 

<ngx-datatable     
     [scrollbarV]="true"
     [loadingIndicator]="isLoading"
      [limit]="limit"
     (scroll)='onScroll($event.offsetY)'>
    </ngx-datatable>


 onScroll(offsetY: number) {
    this.isLoading = true;


   let numberViewRows = 12;
   const viewHeight = this.el.nativeElement.getBoundingClientRect().height - this.headerHeight;


   if (!this.isLoading && offsetY >= this.rowHeight * numberViewRows ) {

      this.loadPageData.emit(this.data['next']);
      this.isLoading = false;
    }
}

Когда условие выполнено, отправителю отправляется родительский компонент для получения следующей страницы / данных 

nextPage(pageNum: any) {

    this.isLoading = true;
    this.assetService.reloadDataTable(pageNum).subscribe(results => {

    this.dataShareService.setEnviromentData(results);


    this.isLoading = false;
  }, err => {
     console.log('err', err)
  });
}

служба обмена данными: в первый раз, когда служба получает данные, она назначает переменную previousEnviromentData. каждый раз, когда API вызывается next / prev и счетчик обновляется, а массив результатов добавляется к предыдущим данным 

  private enviromeInfoData = new BehaviorSubject([{}]);
  enviromeData = this.enviromeInfoData.asObservable();
  private previousEnviromentData;

  setEnviromentData(data: any) {


     if (data['results'] !== this.previousEnviromentData && this.previousEnviromentData !== undefined) {

      this.previousEnviromentData["count"] = data.count,
      this.previousEnviromentData["next"] = data.next,
      this.previousEnviromentData["page_count"] = data.page_count,
      this.previousEnviromentData["previous"] = data.previous,
      this.previousEnviromentData['results'].push(...data['results']);


      this.enviromeInfoData.next(this.previousEnviromentData);

   } else {

     this.previousEnviromentData = data;
     this.enviromeInfoData.next(data);
  }

}

Однако, когда я прокручиваю до нижней части таблицы, данные обновляются в родительских компонентах. и сервис обмена данными, но никогда не обновляется в таблице. Что я делаю неправильно / отсутствует?

...