使用 Angular 5 将数组和嵌套 json 显示到 Ag-grid答案

【问题标题】：Displaying Array and nested json to Ag-grid using Angular 5使用 Angular 5 将数组和嵌套 json 显示到 Ag-grid
【发布时间】：2018-11-13 17:51:30
【问题描述】：

我有一个场景来绑定嵌套和 json 数组以使用角度 5 绑定 ag-grid。我尝试在我的 colDefs 行数据上使用 valueGetter 作为 Json 进行绑定。似乎什么都没有解决。我也没有看到任何文档示例。

这是我到现在为止的 json 和代码。

json：

{
"packages": [
{
  "packageId": 2,
  "name": "Name1",
  "isEnabled": true,
  "packageRegistrationTypes": [
    {
      "registrationType": {
        "registrationTypeId": 1,
        "description": "Reg1"
      },
      "isActive": true
    },
    {
      "registrationType": {
        "registrationTypeId": 45,
        "description": "Reg2"
      },
      "isActive": false
    }
  ]
 }
 ]
}

Angular 5：冷定义

  {headerName: 'Package Name',checkboxSelection: true,rowGroupIndex: 0, valueGetter: params => params.data.packages[0].name},

我从服务绑定的行值，但未能得到它。我应该使用任何不同的格式来绑定嵌套值和数组值吗？

【问题讨论】：

标签： json angular ag-grid

【解决方案1】：

我从来没有试图弯曲ColDef，只是在你得到原始数据后稍微改变你的数据格式。

您的数据是基于键的，而不是常规数组，我会这样做

.subscribe(res => {
    this.data = Object.values(res.packages);
})

【讨论】：

这将使每个记录循环以获取框架，希望有更好的解决方案。像 ag-grid 中的任何内部构建一样处理这些类型的数据
将您的后处理数据作为原始数据以备将来使用，例如。 ag-grid 永远不会 100% 同意您的服务器 json。
谢谢老兄，会这样走

【解决方案2】：

基本上就是@windmaomao 所说的。当您使用 agGrid api 调用 setRowData 时，将 data.packages 作为参数传递：-this.gridOptions.api.setRowData(data.packages); 之后，field: 'name', 在放入 columnDefs 时应该可以工作（所以我想也不再需要 valueGetter）

【讨论】：