Angular ngx-datatable Issue: when scrolling down new data isn't populating

Question

I'm using Angular 5 with Bootstrap 4 and working with a library named ngx-datatable.

I have a module named dashboard. In which I'm trying to fetch upcoming / new records while scrolling down in my ngx-datatable but I'm encounter an issue which is my ngx-datatable not updating new records while I'm scrolling down.

Desire output

Here is my dashboard module component code:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements AfterViewInit {
  page = new Page();
  rows = new Array<Post>();
  cache: any = {};

  @ViewChild('myTable') table;

  private isLoading: boolean = false;

  constructor(private serverResultsService: PostsService) {
    this.setPage({offset: 0, pageSize: 10});
  }

  ngAfterViewInit() {
    this.table.bodyComponent.updatePage = function(direction: string): void     {
      let offset = this.indexes.first / this.pageSize;

      if (direction === 'up') {
        offset = Math.ceil(offset);
        console.log('up offset: ' + offset)
      } else if (direction === 'down') {
        offset = Math.floor(offset);
        console.log('down offset: ' + offset)
      }

      if (direction !== undefined && !isNaN(offset)) {
        this.page.emit({ offset });
      }
    }
  }


  setPage(pageInfo) {
    this.isLoading = true;
    this.page.pageNumber = pageInfo.offset;
    this.page.size = pageInfo.pageSize;

    this.serverResultsService.getResults(this.page).subscribe(pagedData => {
      this.page = pagedData.page;

      let rows = this.rows;
      if (rows.length !== pagedData.page.totalElements) {
        rows = Array.apply(null, Array(pagedData.page.totalElements));
        rows = rows.map((x, i) => this.rows[i]);
      }

      // calc start
      const start = this.page.pageNumber * this.page.size;

      // set rows to our new rows
      pagedData.data.map((x, i) => rows[i + start] = x);
      this.rows = rows;
      this.isLoading = false;
    });
  }

}

I don't know what I'm doing wrong that's why I'm not getting new records while scrolling down here is my whole project.

Teodor Todorov · Answer 1 · 2018-06-15T15:43:21.587

check your rows value after

 `if (rows.length !== pagedData.page.totalElements) {
    rows = Array.apply(null, Array(pagedData.page.totalElements));
    rows = rows.map((x, i) => this.rows[i]);
  }`

for me map(), apply(), fill() returns undefined objects when i have new Object() instead of primitive. Don't see a reason to use

let rows = this.rows

it is a reference. You can use rows = [...rows, ...secondArray]

Angular ngx-datatable Issue: when scrolling down new data isn't populating

1 Answers1