Загрузка данных в таблицу после загрузки таблицы - ngx-datatable - PullRequest
Новая
       10

Загрузка данных в таблицу после загрузки таблицы - ngx-datatable

0 голосов
/ 26 июня 2018

У меня есть страница с выпадающим списком и датой ngx.

I-страница загружает раскрывающийся список и таблицу, и в зависимости от того, что выбирает пользователь, таблица загружает соответствующие данные.

Проблема у меня в том, что таблица загружается, но не показывает столбцы / строки, , но в ней есть счетчик количества показанных вещей, что нечетно.

Соответствующий код: 

  @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'}
]

1 Ответ

0 голосов
/ 26 июня 2018

Оставив это, потому что я понял, что недостаточно внимательно прочитал их пример кода и был глуп. Вот пара проблем, которые я исправил:

  1. Я неправильно определил столбцы, он принимает список объектов, каждый из которых имеет ключ 'name', а его значением является имя столбца
  2. Вы не можете нажать на строки / столбцы, как я, нужно установить их все сразу, иначе он не загрузит эти данные

Фиксированный 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;
    });
  }
...