Angular html文档中的递归函数

编程问答 2022-08-11

问题描述

我基本上需要从视觉上构建一个图，即一棵家谱： this is what i need :) 从看起来像这样的对象数组中

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

我认为生成树的唯一选择是在html组件中使用递归函数。 甚至可以使用ngfor和ng-template制作递归函数吗？我该怎么办呢？ 预先感谢。

解决方法

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

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