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

【问题标题】：ngx-treeview showing wrong tree structure. Where is wrong?ngx-treeview 显示错误的树结构。哪里错了？
【发布时间】：2020-03-03 14:31:30
【问题描述】：

我遵循 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 复选框应该是父级，但它显示在 AVAILABILITY ASSURANCE 下。

这也给用户和我造成了困惑。

【问题讨论】：

根据官方文档，结构应该是这样的 { text: 'Networking', value: 92, children: [ { text: 'Internet', value: 921 }, { text: ' Security', value: 922 } ] } 但是你使用的是“internalChildren”..为什么？
尝试为没有任何子节点的节点提供空数组。像 internalChildren:[]
根据documentation，没有什么叫internalChildren，试试children吧。

标签： javascript angular typescript npm ngx-treeview

【解决方案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
}

希望这对你有用。

【讨论】：

请您下次格式化代码，选择code/Json，然后点击{}按钮。