[英]How to display tree structure 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>
请注意,视图中的* ngIf是停止循环的事情。 然后可以在另一个组件中使用它:
<app-tree-view [data]="offices"></app-tree-view>
例如, 办公室是您的初始数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.