Ag-grid + Angular 6-在列中顯示嵌套數組

Question

我有一個用戶列表，每個用戶都有幾個角色作為數組。 我使用ag-grid來顯示所有用戶及其角色，但是ag-grid似乎不適用於我的數據結構。 那么，可以在網格表上為每個用戶顯示所有用戶角色的最佳方法是什么？

數據結構：

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

Answer 1

我建議最好的方法是創建一個列組（可折疊）並將信息放入其中。

  {
    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

您可以定義單個字段以顯示現有角色中的最高角色，然后通過折疊按鈕顯示所有用戶角色。

有關列組的更多詳細信息