如何将json渲染为ag-grid Angular2 / typescript

Question

我正在尝试在Angular2 / Typescript中的ag-grid中渲染我的json数据。我看到许多tuto像ag-grid cell rendering error一样没有成功。 我知道如何渲染静态数据，但动态地从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"
      ]
    }
  ]
}