Angular 2 PrimeNG 从多维数组构建 DataTable
Angular 2 PrimeNG build DataTable from multidimensional array
服务器APIreturns数据格式如下:
export interface Response {
cols: string[];
rows: string[][];
}
cols
数组包含 header 个名称,而 rows
的每个元素都是一个包含一些值的数组,因此响应示例如下所示:
我需要使用接收到的数据构建 PrimeNG DataTable,但在文档中没有这样的示例。我该怎么做?
假设您像这样从后端获取数据:
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
你可以吗?
服务器APIreturns数据格式如下:
export interface Response {
cols: string[];
rows: string[][];
}
cols
数组包含 header 个名称,而 rows
的每个元素都是一个包含一些值的数组,因此响应示例如下所示:
我需要使用接收到的数据构建 PrimeNG DataTable,但在文档中没有这样的示例。我该怎么做?
假设您像这样从后端获取数据:
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
你可以吗?