Angular html 文档中的递归函数

Question

我需要建立一个图表，基本上是一个家谱： this is what i need :) 来自看起来像这样的对象数组

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

我认为生成树的唯一选择是在 html 组件中使用递归函数。甚至可以使用 ngfor 和 ng-template 创建递归函数吗？我该怎么做？提前致谢。

Answer 1

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

    <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>

Angular html 文档中的递归函数

A recursive function in Angular html document

html

angular

recursion

tree

diagram