Как отобразить древовидную структуру angular2

Question

У меня есть объект somethig, как это:

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

Любой объект может иметь childText любую идею, как отобразить это?

Answer 1

Вы должны использовать автореферентный компонент, чтобы сделать это:

@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> 

Офисы является вашими исходными данными для примера.