带有嵌套对象数组的Ag网格

Question

我打算使用AG Grid来显示网格。但我的用例之一是围绕这个数据结构的：

{
  "component": "Component Name",
  "model": "Model Name",
  "rules":[
    {
      "ruleId": 1,
      "precondition": true,
      "value": 150
    },
    {
      "ruleId":2,
      "precondition":false,
      "value": 100
    },
    {
      "ruleId":3,
      "precondition":false,
      "value":75
    }
  ]
}

我很难将规则显示为组件的嵌套行。到目前为止，如果规则是单个嵌套对象，我就能够创建网格，但是当它需要处理数组对象时，我的逻辑就会中断。

我使用以下代码来指定列的定义：

   get gridOptions(): GridOptions {
        return {
          ...this.options,

          defaultColDef: this.defaultColumnDefs,
          columnDefs: this.columnDefs,

          enableCharts: false,

          treeData: true,
          getDataPath: this.dataPath
        };
      }

    get columnDefs(): Array<{children?: Array<_ColDef>; skipKey?: boolean;}> {
        return [
          {
            headerName: 'Component',
            children: this.columnDefs_component
          }
        ];
      }

      get columnDefs_component(): Array<{children?: Array<_ColDef>; skipKey?: boolean;}> {
        return [
          {
            headerName: 'Component',
            field: 'componentName'
          },
          {
            headerName: 'Model',
            field: 'model'
          },
          {
            headerName: 'Rules',
            children: this.columnDefs_rules
          }
        ];
      }

  get columnDefs_rules(): Array<{children?: Array<_ColDef>; skipKey?: boolean;}> {
    return [
      {
        headerName: 'Id',
        field: 'rules.ruleId',
      },
      {
        headerName: 'Limit Value',
        field: 'rules.value'
      },
      {
        headerName: 'Precondition',
        field: 'rules.precondition'
      }
    ];
  }

通过上述操作，与嵌套规则对象数组相关的单元格上不会显示任何内容。我能够使用

valueGetter

并设置一个函数来返回对象数组，但它将显示

object Object

列表，而不是规则对象的值。

我缺少的是如何告诉 Ag-Grid 规则列是规则节点内的规则对象数组。

有人可以为我指出一些如何实现这一目标的方向吗？

注意：我可以通过将字段设置为

'rules.0.field'

来显示单个记录，但这只会显示数组的第一个值，而不是其他值...

Answer 1

您必须使用“rules.field”而不是“rules.0.field”。

我这样解决了我的问题：

columnDefs.value = [
        {
            field: 'p.title',
            headerName: getColumnLocalizedName('title')
        },
        {
            field: 'p.brand',
            headerName: getColumnLocalizedName('brand')
        }
    ]