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

Question

我有2个模块的角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”属性。 你的代码没有这样做。