Angular6 ngFor指令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>

我可以使用typescript生成所有内容,但有没有办法用模板指令执行此操作？

Answer 1

是的,可以使用模板(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.