рекурсивно создать html -лист с angular

Question

У меня есть древовидная структура данных

    {
        name: "name 1",
        childs: [
            {
                name: "name 1.1",
                childs: [
                    {
                        name: "name 1.1.1",
                        childs: []
                    },
                    {
                        name: "name 1.1.2",
                        childs: [
                            {
                                name: "name 1.1.2.1",
                                childs: []
                            }
                        ]
                    },
                    {
                        name: "name 1.1.3",
                        childs: []
                    }
                ]
            },
            {
                name: "name 1.2",
                childs: [
                    {
                        name: "name 1.2.1",
                        childs: []
                    }
                ]
            },
            {
                name: "name 1.3",
                childs: [ ]
            }
        ]
    }
] 

, и я хочу визуализировать ее в виде каскадного списка, подобного этому

<ul>
            <li>name 1
                <ul>
                    <li>name 1.1
                        <ul>
                            <li>name 1.1.1</li>
                            <li>name 1.1.2
                                <ul>
                                    <li>1.1.2.1</li>
                                </ul>
                            </li>
                            <li>name 1.1.3</li>
                        </ul>
                    </li>
                    <li>name 1.2
                        <ul>
                            <li>name 1.2.1</li>
                        </ul>
                    </li>
                    <li>name 1.3</li>
                </ul>
            </li>           
        </ul>

Проблема в том, что моя структура данных не исправлена. Поэтому мне нужно будет создать мой HTML выходной рекурсив, но я не знаю, как это сделать в angular. В этом случае простого * ngfor будет недостаточно. Есть ли механизм angular, который я могу использовать для решения этой проблемы? Или кто-нибудь знает, как я могу решить эту проблему?

Answer 1

Попробуйте так:

<ul>
  <ng-template #recursiveList let-list>
    <li *ngFor="let item of list">
      {{item.name}}
      <ul *ngIf="item.childs.length > 0">
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.childs }"></ng-container>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

https://stackblitz.com/edit/angular-76qpgf?file=src / app / app.component. html