Javascript 递归角度div模板

看看节点组件。。。看看css是如何被我当前的递归实现搞得一团糟的

所以我环顾四周，只发现UL和LI的良好递归指令。。。我认为这只是因为UL和LI通常是嵌套的。我使用的是angular的最新版本

我试图使用递归在一个角度组件中获取一些json数据，并将其放入div中，如下所示

有人知道如何将节点列表转换为递归的角度指令，以便可以对不同的节点值重复使用html吗？我想我可能需要在那里有一个ngif来检测它是否有子对象，这样它就可以嵌套在父或子div中

基本的html是 高压项 高压项父项 hv项目儿童 高压项子项 ***再次出现另一个hv项 高压项子项 高压项子项

求救信号发送帮助

公共节点=[
{名称：'生产'，子项：[
{name:'测试一'，子项：[
{name:'发展一号'，子项：[]}，
{name:'发展二'，子项：[]}
]}
,
{name:'测试二'，子项：[
{姓名：'发展三'，儿童：[]}，
{name:'发展四'，子项：[]}
]}
]}
];

家长

家长

儿童1
儿童2

儿童2

儿童2

儿童3

这个怎么样

在定义了
节点的主应用程序组件中：

<mycomponent 
    *ngFor="let item of node"
    [data]="item">
</mycomponent>

当然，您可以根据需要添加复杂性和格式，但这说明了如何从
mycomponent
本身中重用
mycomponent
组件。
这里有一个三级嵌套JSON对象“节点”的示例

<div *ngFor="let item of node">
<div class="hv-item-parent">
  <p class="simple-card"> {{item.name}} </p>
</div>
<div *ngFor="let nested of item.children" class="hv-item-children">{{nested.name}}
  <div *ngFor="let secondNested of nested.children" class="hv-item-children">{{secondNested.name}}</div>
</div>


{{item.name}
{{nested.name}
{{secondNested.name}

这个怎么样-复制/修改自。这与@chris farmer略有不同。我认为这将限制运行递归的代码量，并使您能够更好地控制模板变量，因为只有模板的“递归”部分是重复的，而不是整个组件

<ng-template #recursiveNodes let-nodes>
 <div *ngFor="let item of nodes">
    {{item.name}}
    <div *ngIf="item.children.length > 0">
    <ng-container *ngTemplateOutlet="recursiveNodes; context: {$implicit: item.children}"></ng-container>
    </div>
  </div>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveNodes;context:{$implicit: nodes}"></ng-container>


{{item.name}
您已尝试回答重复的问题

在Stackblitz上
current我已经（见上图）@chris_farmerI将其添加到我的帖子末尾。。。但它会弄乱css格式。它看起来像是在实现我的目标吗？这很痛苦。。我认为这是一团糟，因为css在stackblitz中使用前后创建了一个演示，以便其他人可以更容易地查看和编辑您的工作以提供帮助。@StuartWallace加载stackblitz时出错。先生，您是上帝。。。。是的，我想删除这个问题，因为它太难看了
<ng-template #recursiveNodes let-nodes>
 <div *ngFor="let item of nodes">
    {{item.name}}
    <div *ngIf="item.children.length > 0">
    <ng-container *ngTemplateOutlet="recursiveNodes; context: {$implicit: item.children}"></ng-container>
    </div>
  </div>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveNodes;context:{$implicit: nodes}"></ng-container>