Angular AG 网格压缩 JSON答案

【问题标题】：Angular AG Grid Compressed JSONAngular AG 网格压缩 JSON
【发布时间】：2018-07-03 07:11:04
【问题描述】：

我将 AG Grid 与 Angualr 2 一起使用，而我来自后端的数据不是键值对格式。

AG Grid 预计：

*rowData = [{col1: "data1", col2: "data2"},{col1:"data3", col2:"data4"}];*

在我们的例子中，我们从后端获取以下格式的压缩数据

*gridData  = {cols:[col1, col2], rows:[{"data1","data2"},{"data3","data4"}]}*

这迫使我们在 UI 级别将 gridData 转换为 rowData。

有什么解决办法吗？我们无法更新 rest 以提供预期的数据。

【问题讨论】：

标签： angular grid ag-grid

【解决方案1】：

您需要使用valueGetter 参数而不是field 参数。这是一个plunker 来演示。

假设您不知道从后端收到多少列，或者您想要一个通用的解决方案，那么您只需要这样做：

this.gridData  = {cols:["col1", "col2"], rows:[["data1","data2"],["data3","data4"]]};
this.columnDefs = [];
this.rowData = this.gridData.rows;
for (var i in this.gridData.cols){
  var scopeOutCurrIndex = i => (params) => params.data[i]
  this.columnDefs.push({
    headerName: this.gridData.cols[i],
    valueGetter: scopeOutCurrIndex(i)
  })
}

如果您确实知道将返回多少列，那么您可以像这样对 columnDef 进行硬编码：

this.columnDefs = [{
    headerName: "col1",
    valueGetter: (params) => params.data[1]
},
{
    headerName: "col2",
    valueGetter: (params) => params.data[2]
},
...
]

【讨论】：

谢谢 Jarod，这对我有帮助。