Angular 2 PrimeNG строит DataTable из многомерного массива

Серверный API возвращает данные в следующем виде:

export interface Response {
  cols: string[];
  rows: string[][];
}

Массив cols содержит имена заголовков, а каждый элемент массива rows представляет собой массив, содержащий некоторые значения, поэтому пример ответа выглядит так: пример ответа сервера

Мне нужно построить PrimeNG DataTable по полученным данным, но в документации такого примера нет. Как мне это сделать?


person Nikita Marinosyan    schedule 01.11.2017    source источник


Ответы (1)


Представьте, что вы извлекли данные из своего бэкэнда следующим образом:

this.backendData = {
    cols:['name', 'Income last year'],
    rows:[['Lionbridge', 150250], ['Locatech', 1085]]
}

Во-первых, вы должны динамически создавать столбцы PrimeNG из этих внутренних данных:

this.cols = [];
var i, row, obj;
for(i=0;i<this.backendData.cols.length;i++) {
    this.cols.push(this.constructColumn(this.backendData.cols[i]));
}

Затем вы должны заполнить данные для таблицы данных PrimeNG следующим образом (путем повторения каждой строки данных строк бэкэнда):

this.data = [];
for(row=0;row<this.backendData.rows.length;row++) {
    obj = {};
    for(i=0;i<this.backendData.cols.length;i++) {
        obj[this.backendData.cols[i]] = this.backendData.rows[row][i];
    }
    this.data.push(obj);
}

Наконец, просто свяжите эти данные с представлением:

<p-dataTable [value]="data">
  <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>

Вот рабочий Plunker

Это тебя устраивает ?

person Antikhippe    schedule 01.11.2017
comment
Да! Большое тебе спасибо! - person Nikita Marinosyan; 03.11.2017