0

我有以下响应结构，我正在尝试对它们进行分组或解析以适应 ngx-treeview 请求数据结构。有人可以帮我实现它吗？

{
  "@type": "QueryResult",
  "result": [
    {
      "@type": "Folder",
      "id": "RjozNTg2ODk1",
      "name": "Training-OCTOBER-2020",
      "fullPath": "Training-OCTOBER-2020",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2ODk2",
      "name": "Process Library",
      "fullPath": "Training-OCTOBER-2020/Process Library",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2ODk3",
      "name": "Boomi Training",
      "fullPath": "Training-OCTOBER-2020/Process Library/Boomi Training",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTAz",
      "name": "Vijay",
      "fullPath": "Training-OCTOBER-2020/Vijay",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTA0",
      "name": "Vamsi",
      "fullPath": "Training-OCTOBER-2020/Vamsi",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTA1",
      "name": "Kranthi",
      "fullPath": "Training-OCTOBER-2020/Kranthi",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTA2",
      "name": "Akhil",
      "fullPath": "Training-OCTOBER-2020/Akhil",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTA4",
      "name": "File",
      "fullPath": "Training-OCTOBER-2020/Akhil/File",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTEw",
      "name": "FTP",
      "fullPath": "Training-OCTOBER-2020/Akhil/FTP",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTEy",
      "name": "Database",
      "fullPath": "Training-OCTOBER-2020/Kranthi/Database",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTEz",
      "name": "API",
      "fullPath": "Training-OCTOBER-2020/Vamsi/API",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTE0",
      "name": "Oracle",
      "fullPath": "Training-OCTOBER-2020/Vijay/Oracle",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTE4",
      "name": "MangoDB",
      "fullPath": "Training-OCTOBER-2020/Vijay/MangoDB",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTE5",
      "name": "HelloWorldAPI",
      "fullPath": "Training-OCTOBER-2020/Vamsi/HelloWorldAPI",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTIw",
      "name": "Glassdoor",
      "fullPath": "Training-OCTOBER-2020/Kranthi/Glassdoor",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTQ2",
      "name": "Calculator",
      "fullPath": "Training-OCTOBER-2020/Akhil/Calculator",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg3MTA2",
      "name": "SFTP",
      "fullPath": "Training-OCTOBER-2020/Akhil/FTP/SFTP",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg5MDAz",
      "name": "MiniCalc",
      "fullPath": "Training-OCTOBER-2020/Akhil/Calculator/MiniCalc",
      "deleted": false
    }
  ],
  "numberOfResults": 18
}

我想要基于fullPath代表当前文件夹完整路径的树视图分组name

ngx-treeview 结构：https ://github.com/leovo2708/ngx-treeview/blob/master/src/app/book/book.service.ts

我发现 Angular 中使用的大多数树视图库都需要一个特定格式的结构，而我对如何在没有太多障碍的情况下实现它完全一无所知

ngx-treeview：https ://www.npmjs.com/package/ngx-treeview

ngx-treeview 演示：https ://leovo2708.github.io/ngx-treeview/#/components

如果有人能提供至少一个关于如何实现这一点的提示，我真的很感激。谢谢！

4

1 回答 1

0

它看起来好像您的数据只是一个级别。如果是这种情况，您可以使用内置管道通过执行以下操作将您的 json 转换为 TreeviewItem 列表：

<ngx-dropdown-treeview
  [config]="config"
  [items]="items | ngxTreeview:'fullPath'"
  (selectedChange)="onSelectedChange($event)"
>
</ngx-dropdown-treeview>
于 2021-03-14T23:52:33.297 回答