在 AG-Grid 中显示复杂的键值对

Posted 2023-03-28

【中文标题】在 AG-Grid 中显示复杂的键值对

【英文标题】：Display Complex key-value pair in AG-Grid

【发布时间】：2021-11-20 06:24:03

【问题描述】：

我有一张通过 API 发送给 Angular 的地图，我想在 ag-grid 中显示它。 该地图具有作为日期的键和作为对象列表的值 地图是这样的：

2019-12-23 00:00:00.0: Array(3),2019-05-24 00:00:00.0: Array(1)

这就是对象的样子 "id":5, "amt":10,"status":new

所以我希望在 ag-grid 中显示相同的内容，以便我可以根据 amt 字段对其进行排序。 所以像：

（假设从上面的地图 obj1,obj2,obj3 在第一个数组中，即键为 2019-12-23 00:00:00.0 和 obj4 的键为 2019-05-24 00:00:00.0 并假设 obj1 .amt > obj4.amt > obj2.amt > obj3.amt)。

2019-12-23 00:00:00.0 | obj1.id| obj1.amt |obj1.status
2019-05-24 00:00:00.0 | obj4.id| obj4.amt |obj4.status
2019-12-23 00:00:00.0 | obj2.id| obj2.amt |obj2.status
2019-12-23 00:00:00.0 | obj3.id| obj3.amt |obj3.status

我怎样才能做到这一点？任何代码 sn-p 都会有所帮助。 谢谢

【参考方案1】：

根据时间属性，实现可能会有所不同

你需要时间吗？

如果 - 否 - 解决方案会容易得多

const entireObject = 
[new Date(1000).toISOString()]: [ "id":5, "amt":10,"status":'new',  "id":6, "amt":10,"status":'new'],
[new Date(2000).toISOString()]: [ "id":7, "amt":10,"status":'new',  "id":8, "amt":10,"status":'new']

const outputData = Object.values(entireObject).flat();
console.log(outputData)

如果 - 是

const entireObject = 
[new Date(1000).toISOString()]: [ "id":5, "amt":10,"status":'new',  "id":6, "amt":10,"status":'new'],
[new Date(2000).toISOString()]: [ "id":7, "amt":10,"status":'new',  "id":8, "amt":10,"status":'new']

const outputData = Object.entries(entireObject).map(([time, arr]) => arr.map( i => (...i, time))).flat();
console.log(outputData);

演示：https://plnkr.co/edit/97AVLXG8GeSzc7wo

例子

【讨论】：

嘿，谢谢这对我有用。因为我从 API 本身获得时间，所以这样做 Object.values(entireObject).flat();应该可以正常工作吗？