html文档中的递归函数

我需要建立一个可视化的家庭树图表： 从一个如下所示的对象数组

[{
Id:1,
child:[
       {id:2,
        child:[
               {id:4,
                child:[]}]
        },
        {id:3,
        child:[]}
        ]
}]

我认为生成树的唯一选择是在html组件中使用递归函数。 甚至可以使用ngfor和ng模板生成递归函数吗？我该怎么做呢？

---

提前谢谢。

以防有人需要解决完全相同的问题

    <ul>
      <ng-container
        *ngTemplateOutlet="Recursion; context:{ list: List}"
      ></ng-container>
    </ul>



<ng-template #Recursion let-list="list">
      <li *ngFor="let item of list">
        <a href="#">{{ item.name }}</a>
        <ul *ngIf="item.child.length > 0">
          <ng-container
            *ngTemplateOutlet="Recursion; context:{ list: item.child }"
          ></ng-container>
        </ul>
      </li>
    </ng-template>

您确实不希望在模板中包含递归逻辑。这属于您的组件。也许可以看看角材质CDK树组件？除了递归，我看不到任何合适的选项。它应该看起来像一棵家谱，你知道奶奶在上面，妈妈和爸爸在她下面，等等，像这样的吗？不，更像这样啊对。。。还有那种介绍吗？最后，一棵树就是一棵树——因此，从功能上来说，我给出的树链接应该可以让您访问一个类似树的数据结构。要使它成为那种格式-我想你可能需要自己做一些漂亮的css。。。