Question

我有一个带有下拉菜单和ngx数据表的页面。

I页面将加载下拉列表和表格，并且根据用户选择的内容，表格将加载相关数据。

我遇到的问题是表正在加载，但没有显示列/行，but it does have a count of how many things it should be showing which is odd.

相关代码：

  @ViewChild(DatatableComponent) table: DatatableComponent;
  columns = [];
  rows = [];

  // The dropdown kicks off a service call which is passed to this
  loadTableData(serviceCall: Observable<any>) {
    serviceCall.subscribe(data => {
      if (data.length === 0 || !data) {
        return;
      }
      this.setColumns(data[0]);
      data.forEach(rowData => {
        this.rows.push(rowData);
      });
    });
  }

  setColumns(dataObj: object) {
    Object.keys(dataObj).forEach(key => {
      this.columns.push(key);
    });
  }

数据表的html：

<ngx-datatable #table 
  class="material"
  [columns]="columns"
  [columnMode]="'force'"
  [scrollbarH]="true"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [limit]="5"
  [rows]="rows">
</ngx-datatable>

我记录了行/列，它们都具有正确的数据。我认为这与首先加载该表有关，然后再尝试向其中填充数据。

服务中的数据结构类似于（具有更多行）：

[
 {'id': '1', 'name': 'Joe', 'job': 'window washer'},
 {'id': '2', 'name': 'Bob', 'job': 'fireman'}
]

Answer 1

保留这一点是因为我意识到我没有足够仔细地阅读他们的示例代码，并且很笨。我在这里解决的几个问题：

我在定义列时出错，它接受了一个对象列表，每个对象都具有键“ name”，其值是列名
您不能像以前那样推动行/列，需要一次全部设置，否则不会加载该数据

固定的setColumns：

  setColumns(dataObj: object) {
    this.columns = Object.keys(dataObj).map(name => {
      return { name };
    });
  }

固定设置行：

  loadTableData(serviceCall: Observable<any>) {
    serviceCall.subscribe(data => {
      if (data.length === 0 || !data) {
        return;
      }
      this.setColumns(data[0]);
      this.rows = data;
    });
  }

加载表格后，将数据加载到表格中-ngx-datatable

1 个答案: