如何编写可重复使用的模板，该模板可以遍历所有嵌套数据并在HTML中显示嵌套列表

Question

我正在寻找一些解决方案来制作可重复使用的模板，该模板可以迭代到所有嵌套数据并在列表中显示内容。

let data = [
{
"label":"test1",
"hierarchy":[
{
"label":"test11",
}
]
},
{
"label":"test2",
"hierarchy":[
{
"label":"test21",
"hierarchy":[
{
"label":"test211",
"hierarchy":[
{
"label":"test2111",
"hierarchy":[
{
"label":"test21111",
}
]
}
]
}
]
}
]
},
{
"label":"test3",
"hierarchy":[
{
"label":"test31",
"hierarchy":[
{
"label":"test311",
"hierarchy":[
{
"label":"test3111",
"hierarchy":[
{
"label":"test31111",
}
]
}
]
}
]
}
]
},


]

<div>
<div>
<li *ngFor="let viewList of data;  >
<ul class="nested">
<li *ngFor="let subAncesstorList of viewList.hierarchy; let j = index">
<label style="margin: 0" class="labelhover">
{{ subAncesstorList.label }} 
</label>

<div  *ngIf="subAncesstorList.hierarchy">
<ul class="nested">
<li  *ngFor="let nestedsubAncesstorList of subAncesstorList.hierarchy; let k = index">
<label style="margin: 0" class="labelhover" >
{{ nestedsubAncesstorList.label }} 
</label>
<div  *ngIf="nestedsubAncesstorList.hierarchy">
<ul class="nested">
<li  *ngFor="let nestedsubAncesstorList1 of nestedsubAncesstorList.hierarchy; let k = index">
<label style="margin: 0" class="labelhover">
{{ nestedsubAncesstorList1.label }} 
</label>
<div  *ngIf="nestedsubAncesstorList1.hierarchy">
<ul class="nested">
<li  *ngFor="let nestedsubAncesstorList2 of nestedsubAncesstorList1.hierarchy; let k = index">
<label style="margin: 0" class="labelhover" >
{{ nestedsubAncesstorList2.label }} 
</label>
<div  *ngIf="nestedsubAncesstorList2.hierarchy">
<ul class="nested">
<li  *ngFor="let nestedsubAncesstorList3 of nestedsubAncesstorList2.hierarchy; let k = index">
<label style="margin: 0" class="labelhover" >
{{ nestedsubAncesstorList3.label }} 
</label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>

</div>

</li>
</ul>
</li>

</div>
</div>

我怎样才能用最少的HTML代码生成显示嵌套列表的循环？

我尝试过简单的方法，检查层次结构是否存在，但它不支持动态数据。

Answer 1

您可以使用ng模板来处理以下数据：

<div *ngFor="let node of data">
<ng-container *ngTemplateOutlet="nodeTemplate; context:{$implicit: node}"></ng-container>
</div>
<ng-template let-node #nodeTemplate>
<ul class="nested">
<li>
<label style="margin: 0" class="labelhover">
{{ node.label }}
</label>
<div *ngIf="node.hierarchy">
<ng-template ngFor let-child [ngForOf]="node.hierarchy">
<ng-container *ngTemplateOutlet="nodeTemplate; context:{$implicit: child}"></ng-container>
</ng-template>
</div>
</li>
</ul>
</ng-template>