如何显示树状结构angular2

我有对象somethig这样的：如何显示树状结构angular2

{ 
id: 1, 
text: "Main", 
childText: [ 
    { 
    id: 3, 
    text: "Child 1", 
    childText: [ 
     { 
     id: 5, 
     text: "child 2" 
     childText: [ 
     .... 
     ] 
     } 
    ] 
    } 
]  
}

任何对象都可以有childText任何想法如何显示呢？

来源

2016-12-03 Vladimir Djukic

http://stackoverflow.com/questions/38821475/recursive-component-loading-with-recursive-array/38822751#38822751，http://stackoverflow.com/questions/37746516/use-component-in-itself/37747022＃37747022，http://stackoverflow.com/questions/35707464/inject-parent-component-of-the-same-type-as-child-component/35707578#35707578 –

你应该使用自参照组件做到这一点：

@Component({ 
    selector: 'app-tree-view', 
    templateUrl: './tree-view.component.html', 
    styleUrls: ['./tree-view.component.css'] 
}) 
export class TreeViewComponent implements OnInit { 
    @Input() data: {children: Array<any>,name: string,id: number}; 
    showChildren: boolean; 
}

在树view.component.html：

<ul class="office-list-unstyled" *ngIf="data"> 
    <li [ngClass]="{'office-parent': d.children.length && !showChildren,'office-child': d.children.length && showChildren}" 
    *ngFor="let d of data.children"> 
    <span (click)="toggleOffices(d)">{{d.name}}</span> 
    <app-tree-view *ngIf="d.children.length && showChildren" [data]="d"></app-tree-view> 
    </li> 
</ul>

需要注意的是，* ngIf的观点是停止循环的事情。然后你就可以在另一个组件使用它：

<app-tree-view [data]="offices"></app-tree-view>

办事处是您例如初始数据。

来源

2016-12-03 18:23:18

什么是内部'tree-view.component .html'？ –

@VladimirDjukic看看我的答案的Html部分。 –

然后我怎么从其他组件调用该组件？ –

如何显示树状结构angular2

回答

相关问题