javascript - 如何显示树结构angular2

我有这样的对象somethig:

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

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

最佳答案

您应该使用一个自引用组件来做到这一点:

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

在tree-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>

注意， View 中的* ngIf是停止循环的事情。
然后可以在另一个组件中使用它:

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

办公室例如是您的初始数据。

关于javascript - 如何显示树结构angular2，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40951009/