Angular AG网格压缩JSON [英] Angular AG Grid Compressed JSON

问题描述

我在Angualr 2中使用了AG Grid，而我的后端数据不是键值对格式.

I am using AG Grid with Angualr 2 and my data from backend is not in key-value pair format.

AG Grid期望:

AG Grid expects:

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

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

In our case we are getting a compressed data from backend in the below format

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

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

This force us to convert gridData to rowData at the UI level.

有什么解决办法吗?我们无法更新其余部分以提供期望的数据.

Is there any solution for this? we can't update rest to give the expected data.

推荐答案

您需要使用 valueGetter 参数而不是 field 参数.这是一个 plunker 进行演示.

You would need to use the valueGetter parameter instead of the field parameter. Here is a plunker to demonstrate.

假设您不知道要从后端接收多少列，或者您想要一个通用的解决方案，那么您只需要执行以下操作:

Assuming that you don't know how many columns you are receiving from your backend, or you want a versatile solution, then you just need to do this:

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进行硬编码:

If you do know how many columns you will get back, then you can hard code the columnDefs like this:

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

这篇关于Angular AG网格压缩JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！