Ich habe Objekt somethig wie folgt angezeigt:Wie Baumstruktur angular2
{
id: 1,
text: "Main",
childText: [
{
id: 3,
text: "Child 1",
childText: [
{
id: 5,
text: "child 2"
childText: [
....
]
}
]
}
]
}
Jedes Objekt kann childText haben eine Idee, wie diese angezeigt werden?
Sie sollten eine sich selbst verweisende Komponente verwenden, das zu tun:
@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;
}
In Baum 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>
Beachten Sie, dass, * ngIf in der Ansicht ist die Sache, die Schleife zu stoppen. Und dann kann man es in einer anderen Komponente verwenden:
<app-tree-view [data]="offices"></app-tree-view>
Büros Ihre ersten Daten zum Beispiel sind.
Was ist innerhalb 'tree-view.component .html'? –
@VladimirDjukic Blick auf den Html Teil meiner Antwort. –
Wie nenne ich diese Komponente von anderen Komponenten? –
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 –