Angular6 ng для директивы n-мерного массива

Question

У меня есть массив с объектами, которые могут содержать дочерние элементы.И дети могут также содержать детей.И так далее.

[
  {
    name: '1',
    children: [
      {
        name: '1.1',
      },
      {
        name: '1.2',
        children: [
          {
            name: '1.2.1'
          }
        ]
      }
    ]
  },
  {
    name: '2'
  }
]

Я написал это, и оно работает для 2 уровней, но я хочу, чтобы оно работало с n уровнями:

<li *ngFor="let item of items">
  {{item.name}}
  <ul>
    <li *ngFor="let child of item.children">
      {{child.name}}
    </li>
  </ul>
</li>

Я мог бы сгенерировать все это с помощью машинописи, ноЕсть ли способ сделать это с помощью директив шаблона?

Answer 1

Вы можете использовать рекурсивный html как эту ссылку

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

надеюсь, это поможет.

Answer 2

Действительно простой способ сделать это, также более подходящий для сложных компонентов, - это использовать рекурсивные компоненты.

Конечный результат:

<app-recursive *ngFor="let item of items" [item]="item"></app-recursive>

Рекурсивный компонент:

<div>Name: {{item.name}}</div>
<app-recursive *ngFor="let child of item.children" [item]="child"></app-recursive>

Его машинопись:

@Input('item') public item: any;

Демонстрация: https://stackblitz.com/edit/angular-7azst4?file=src%2Fapp%2Fapp.component.html

Answer 3

Да, возможно использование шаблонов (ng-template / ngTemplateOutlet):

https://stackblitz.com/edit/angular-bu9poh?file=src%2Fapp%2Fapp.component.html

<div>Hello world!</div>
<ng-container *ngTemplateOutlet="itemsTemplate;context:{items:items}"></ng-container>


<ng-template #itemsTemplate let-items="items">
  <div *ngFor="let item of items">
    Name: {{item.name}}<br/>
    Children:
    <div style="margin-left:20px">
      <ng-container *ngTemplateOutlet="itemsTemplate;context:{items:item.children}"></ng-container>
    </div>
  </div>
</ng-template>

Вы можете использовать ul / li вместо div.