时间戳

首页 > 解决方案 > Ag-grid + Angular 6 - 在列中显示嵌套数组

angular - Ag-grid + Angular 6 - 在列中显示嵌套数组

问题描述

我有一个用户列表，每个用户都有几个角色作为数组。我使用 ag-grid 显示所有用户及其角色，但看起来 ag-grid 不适用于我的数据结构。那么，在网格表上显示每个用户的所有用户角色的最佳方式是什么？

数据结构：

[
 {
  userId: ''
  username: '',
  userRoles: [
    {roleId: '', roleName: ''},
    ...
  ]
 },
 ...
]

标签： angularag-grid

解决方案

我建议最好的方法是创建一个列组（可折叠）并将信息放入其中。

  {
    headerName: 'Roles',
    children: [
        {
            headerName: "Top Role", field: "topRole", columnGroupShow: 'closed', width: 100, 
            cellRenderer: () => { return 'SuperAdmin'; }
        },
        {
            headerName: "Role: 1", columnGroupShow: 'open', width: 150,
            cellRenderer: () => { return 'SuperAdmin'; }
        },
        {
            headerName: "Role: 2", columnGroupShow: 'open', width: 150,
            cellRenderer: () => { return 'Support'; }
        }
    ]
  }

这是一个简单的例子：https ://plnkr.co/edit/i3somDDT9Xdnln32xUy1?p=preview

您可以定义单个字段以显示现有的顶级角色，然后通过折叠按钮显示所有用户角色。

有关列组的更多详细信息

推荐阅读