javascript - ngx-datatable 服务器端滚动 - 表格在到达最后一项时不断调用 api 并且数据永远不会更新

Question

父组件调用 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 函数。

<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);
  }

}

但是，当我滚动到表格底部时，父组件和数据共享服务中的数据会更新，但表格中不会更新。我在做什么错/错过了什么？

标签： javascriptangular7swingxngx-datatable