我正在尝试在 Angular2/Typescript 的 ag-grid 中呈现我的 json 数据。我看到很多像ag-grid 单元格渲染错误但没有成功。我知道如何渲染静态数据,但是从 json 动态渲染,我不能。请问有人有想法吗?谢谢
app.component.ts
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import {GridOptions} from 'ag-grid/main';
@Component({
selector: 'my-app',
template: `<ag-grid-ng2 style="width: 80%; margin-left: 10%" #agGrid class="ag-fresh"
[gridOptions]="myGridOptions">
</ag-grid-ng2>`,
})
export class AppComponent implements OnInit{
public myGridOptions:GridOptions= <GridOptions>{};
ngOnInit() {
this.myGridOptions.rowData = this.createRowData();
this.myGridOptions.columnDefs = this.createColumnDefs();
}
private createColumnDefs() {
return [
{headerName: "NAME", field: "name", width: 100},
{headerName: "AGE", field: "age", width: 100},
{headerName: "GENDER", field: "gender", width: 100}
]
}
private createRowData() {
return [
{name: "Geller", age: 30, gender: "Male"},
{name: "Geller", age: 28, gender: "Female"},
{name: "Tribbiani", age: 29, gender: "Male"},
{name: "Bing", age: 30, gender: "Male"},
{name: "Green", age: 28, gender: "Female"},
{name: "Buffay", age: 29, gender: "Female"}
];
}
}
data.json file
{
"data":{
"0": [
"205,95",
"854,12",
"0,00",
"85,65",
"78,369",
"58,89"
],
"1": [
"0,125",
"5,879",
"793,47",
"776,47",
"789,47",
"445,47"
],
"2": [
"53,47",
"1233,47",
"723,47",
"3789,47",
"123,47",
"32,47"
],
"3": [
"83,47",
"73,4724",
"74,427",
"78,470",
"37,472",
"56,478"
],
"4": [
"8,477",
"48,77",
"78,487",
"3,485",
"7,41457",
"479,47"
]
},
"columnsName": {
"values": [
"Mesures",
"KilogrammeEUR_USD_OTH"
]
},
"rowsName":{
"values": [
"COM",
"Perimetre"
]
},
"columns": [{
"values": [
"LRC",
"EURO"
]
},
{
"values": [
"LRC",
"OTH"
]
},
{
"values": [
"LRC2",
"CANADA"
]
},
{
"values": [
"LRC2",
"USA"
]
}
],
"rows":[
{
"values": [
"All",
"All"
]
},
{
"values": [
"Oth",
"All"
]
}
]
}