如何使用复杂对象设置行数据

Question

我有这个专栏定义

但是数据的来源是这个数组。

所以我在网格中只看到 projectId 和 projectName。

是否可以分配这个数组或者我可能会改变他的结构？谢谢

Answer 1

为了能够通过 ag-Grid API 的 setRowData 方法设置数据，您必须确保任何一个数据输入在任何其他输入之间是一致的。

您可以尝试考虑以下方法解决

后端数据转换
如果您完全控制后端 API，可能会出现这种情况，只需以最适合您的方式将数据发送回客户端即可。
从setRowData
拆分设置数据的过程你可能想为你的组件引入一些额外的方法，例如 data-grid一个用于设置 projectId 和 projectName，另一个用于设置 calendarValues。 ag-Grid docs 最多提供 4 种不同的数据更新方式。
为每列定义自定义 valueGetter
您可以尝试通过引入自定义 valueGetter 来修改 columnDefs 的定义，这将负责提取适当的值，例如

  const columnDefs = [
    {
      headerName: "Febrero2019",
      field: "Febrero2019",
      valueGetter({ data: { calendarValues } }) {
        return calendarValues['Febrero2019'];
      }
    },
  ];

预处理来自API
的数据在您的情况下，您可以定义一个很小的辅助函数来处理将原始数据从 API 转换为 api.setRowData 方法可接受的适当数据格式的过程。

const colDefs = [
    { headerName: 'Codigo', field: 'projectId' },
    { headerName: 'Nombre', field: 'projectName' },
    { headerName: 'Febrero2019', field: 'Febrero2019' },
    { headerName: 'Marzo2019', field: 'Marzo2019' }
];

const projectData = {
    calendarValues: [
        { date: 'Febrero2019', value: 0 },
        { date: 'Marzo2019', value: 0 },
    ],
    projectId: 'SomeId',
    projectName: 'SomeName'
};

const processData = ({ projectId, projectName, calendarValues }) => ({
    projectId,
    projectName,
    ...calendarValues.reduce((calendar, { date, value }) => ({ ...calendar, [date]: value }), {})
});

因此调用 processData 将产生所需的数据格式。

{
  Febrero2019: 0
  Marzo2019: 0
  projectId: "SomeId"
  projectName: "SomeName"
}

如何使用复杂对象设置行数据

how to setRowdata with complex objects

ag-grid