ngx-treeview 显示错误的树结构。哪里错了？

Question

我遵循与 ngx-treeview 中相同的 JSON 格式。 JSON 文件：

[
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "JOURNEY",
    "value": 1
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "INVENTORY ASSURANCE",
    "value": 2
  },
  {
    "internalDisabled": false,
    "internalChecked": true,
    "internalCollapsed": false,
    "text": "SENSOR ASSURANCE",
    "value": 3
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "AVAILABILITY ASSURANCE",
    "value": 4
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "ACTIONABLE",
    "value": 5,
    "internalChildren": [
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Invalid Sensor Values",
        "value": 11
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Management View",
        "value": 12
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Actionable",
        "value": 13
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Informational",
        "value": 14
      }
    ]
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "COMPLIANCE",
    "value": 6
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "EXPENDITURE",
    "value": 7
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "PROJECT",
    "value": 8
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "REPORT",
    "value": 9
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "ADMIN",
    "value": 10,
    "internalChildren": [
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Access & Authorization",
        "value": 15,
        "internalChildren": [
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "List Roles",
            "value": 20
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "User Role Mapping",
            "value": 21
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "List User Role Mapping",
            "value": 22
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Menu Authorization to Role-Function ",
            "value": 23
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Site Management",
            "value": 24
          }
        ]
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Master Data Management",
        "value": 16,
        "internalChildren": [
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Function Master",
            "value": 25
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Feature Master",
            "value": 26
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Site to State Mapping",
            "value": 27
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Unit Cost (EB & DG)",
            "value": 28
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "R4G States",
            "value": 29
          }
        ]
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Escalation Matrix",
        "value": 17
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Facility Management",
        "value": 18,
        "internalChildren": [
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Create Facility",
            "value": 30
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Create Sub Facility",
            "value": 31
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Partial Variance",
            "value": 32
          }
        ]
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Create New Role",
        "value": 19
      }
    ]
  }
]

这是我做的。但预期的显示树是：

根据我的 JSON 数据 ACTIONABLE 复选框应该是父复选框，但它显示在 可用性保证 下。

这也让用户和我感到困惑。

Answer 1

如果你使用的是npmjs的ngx-treeview https://www.npmjs.com/package/ngx-treeview?activeTab=readme

然后像这样格式化您的 JSON：

const itCategory = new TreeviewItem([{
    "text": "JOURNEY",
    "value": 1
}, {
    "text": "INVENTORY ASSURANCE",
    "value": 2
}, {
    "text": "SENSOR ASSURANCE",
    "value": 3
}, {
    "text": "AVAILABILITY ASSURANCE",
    "value": 4
}, {
    "text": "ACTIONABLE",
    "value": 5,
    "children": [{
            "text": "Invalid Sensor Values",
            "value": 11
        },
        {
            "text": "Management View",
            "value": 12
        },
        {
            "text": "Actionable",
            "value": 13
        },
        {
            "text": "Informational",
            "value": 14
        }
    ]
}, {
    "text": "COMPLIANCE",
    "value": 6
}, {
    "text": "EXPENDITURE",
    "value": 7
}, {
    "text": "PROJECT",
    "value": 8
}, {
    "text": "REPORT",
    "value": 9
}, {
    "text": "ADMIN",
    "value": 10,
    "children": [{
            "text": "Access & Authorization",
            "value": 15,
            "children": [{
                    "text": "List Roles",
                    "value": 20
                },
                {
                    "text": "User Role Mapping",
                    "value": 21
                },
                {
                    "text": "List User Role Mapping",
                    "value": 22
                },
                {
                    "text": "Menu Authorization to Role-Function ",
                    "value": 23
                },
                {
                    "text": "Site Management",
                    "value": 24
                }
            ]
        },
        {
            "text": "Master Data Management",
            "value": 16,
            "children": [{
                    "text": "Function Master",
                    "value": 25
                },
                {
                    "text": "Feature Master",
                    "value": 26
                },
                {
                    "text": "Site to State Mapping",
                    "value": 27
                },
                {
                    "text": "Unit Cost (EB & DG)",
                    "value": 28
                },
                {
                    "text": "R4G States",
                    "value": 29
                }
            ]
        },
        {
            "text": "Escalation Matrix",
            "value": 17
        },
        {
            "text": "Facility Management",
            "value": 18,
            "children": [{
                    "text": "Create Facility",
                    "value": 30
                },
                {
                    "text": "Create Sub Facility",
                    "value": 31
                },
                {
                    "text": "Partial Variance",
                    "value": 32
                }
            ]
        },
        {
            "text": "Create New Role",
            "value": 19
        }
    ]
}])

进一步设置配置为

{
   hasAllCheckBox: true,
   hasFilter: false,
   hasCollapseExpand: false,
   decoupleChildFromParent: false,
   maxHeight: 500
}

希望这对您有用。

ngx-treeview 显示错误的树结构。哪里错了？

ngx-treeview showing wrong tree structure. Where is wrong?

javascript

npm

typescript

angular

ngx-treeview