在加载 table 之后将数据加载到 table - ngx-datatable

Question

我有一个带有下拉菜单和 ngx-data 的页面table。

I 页面加载下拉列表和 table，并根据用户的选择，table 加载相关数据。

我遇到的问题是 table 正在加载，但没有显示 columns/rows、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);
    });
  }

数据htmltable:

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

我记录了 rows/columns，它们都有正确的数据。我认为这与 table 首先加载有关，然后我尝试用数据填充它。

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

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

Answer 1

留下这个是因为我意识到我没有足够仔细地阅读他们的示例代码并且是愚蠢的。我解决了这里的几个问题：

我定义的列有误，它接受一个对象列表，每个对象都有键 'name'，它的值是列名
你不能像我一样推送到 rows/columns，需要一次设置它们，否则它不会加载该数据

固定的 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;
    });
  }

在加载 table 之后将数据加载到 table - ngx-datatable

Load data into table after table is loaded - ngx-datatable

ngx-datatable

angular

angular6