angular - Hur kan jag rendera json till ag-grid Angular2/typescript
Jag försöker rendera mina JSON-data i en ag-grid i Angular2/Typescript. Jag har sett många tutorials som ag-grid cell rendering error utan framgång. Jag vet hur man renderar statiska data, men dynamiskt från JSON kunde jag inte. Kan någon vänligen ha en idé om hur man gör det? Tack
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"
]
}
]
}