为什么ng2-tree组件传入指定JSON数据后会显示undefined？

问题根因 #

ng2-tree的[tree]输入属性仅接收单个根节点对象，你直接传入节点数组的话，组件无法读取到默认渲染所需的value属性，就会显示undefined。

解决方法 #

1. 调整数据源结构，将现有节点数组作为子节点套入一个虚拟根节点中：

public treeData = {
  value: 'virtualRoot',
  isExpanded: true,
  children: [
    // 此处放置你原有JSON数组的全部内容
    {
      "value": "helper",
      "name": "helper",
      "children": []
    },
    {
      "value": "taxi",
      "name": "taxi",
      "children": []
    },
    {
      "value": "Cake",
      "name": "Cake",
      "children": [
        {
          "name": "Chocolate Fudge Cake",
          "value": "Chocolate Fudge Cake"
        },
        {
          "name": "Carrot & Walnut Cake",
          "value": "Carrot & Walnut Cake"
        }
      ]
    }
  ]
}

2. 在组件配置中添加rootIsVisible: false隐藏虚拟根，即可正常渲染多个一级节点。如果需要用name字段作为节点展示内容，可额外配置displayField: 'name'：

<tree 
  [tree]="treeData" 
  [settings]="{
    rootIsVisible: false,
    displayField: 'name'
  }"
></tree>

调整后即可正常显示所有节点内容。

内容的提问来源于stack exchange，提问作者EaBengaluru