Angular ngx-datatable问题:向下滚动新数据时不会填充

时间:2018-04-21 21:25:34

标签: angular angular5 ngx-datatable

我使用Angular 5和Bootstrap 4并使用名为ngx-datatable的库。

我有一个名为dashboard的模块。我在ngx-datatable向下滚动的同时尝试获取即将播放的新记录,但我遇到了一个问题,即ngx-datatable我没有更新新记录。向下滚动。

Desire output

这是我的仪表板模块组件代码:

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

}

我不知道我做错了什么,这就是为什么我在滚动到这里时没有获得新记录的原因是project

1 个答案:

答案 0 :(得分:0)

检查

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

对于我map(),apply(),fill()返回未定义的对象,当我有新的Object()而不是原始。 没有理由使用

let rows = this.rows

它是一个参考。您可以使用rows = [... rows,... secondArray]