Angular6 ngFor指令n维数组

Question

I have an array with objects which can contain childs. And the childs can also contain childs. And so on.

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

I wrote this and it works for 2 levels but I want it to work with n levels:

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

I could generate it all with typescript, but is there a way to do this with template directives?

Answer 1

Yes, it's possible using templates ( 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>

You can use ul/li instead of divs.

Answer 2

You can use recursive html as this link

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

hope this helps.

Answer 3

A really simple way to do it which is also much more suitable for complex components is to use recursive components.

The end result:

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

The recursive component:

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

Its typescript:

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

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