Question

我有一个包含2个模块的Angular 4应用：menu和app。菜单模块以树形式显示一些数据。我已经使用了angular2-tree库。

这是我的MenuComponent：

import { Component, OnInit,Input } from '@angular/core';
import {
TreeComponent,
TreeNode,
} from 'angular-tree-component';



@Component({
selector: 'menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent  {

constructor() { }


nodes = [
{
  id: 1,
  name: 'root1',
  children: [
    { id: 2, name: 'child1' },
    { id: 3, name: 'child2' }
  ]
},
{
  id: 4,
  name: 'root2',
  children: [
    { id: 5, name: 'child2.1' },
    {
      id: 6,
      name: 'child2.2',
      children: [
        { id: 7, name: 'subsub' }
       ]
      }
    ]
}
]
}

这是该组件的html：

 <div class="Tree">
 <tree-root [nodes]="nodes">
 <ng-template #treeNodeTemplate let-node let-index="index">
 <a><span>{{ node.data.id }}</span></a>
 </ng-template>
 </tree-root>
 </div>

我想在我的AppComponent中测试此组件，因此我使用其选择器调用了该菜单：

<menu></menu>

不是以树形式获取数据，而是仅获取id为1和4的元素，而不是它们的子元素。不知道为什么会这样。

奇怪的是，如果我使用<router-outlet>它就可以了。

Answer 1

您可能必须从“nodes”对象迭代这个“children”属性。您的代码中没有任何内容可以执行此操作。

为什么数据不以树形式显示？

1 个答案: