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"
      ]
    }
  ]
}