[英]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.