Angular 6 ngFor指令n维数组

Question

我有一个数组，其中包含可以包含子对象的对象。 childs 也可以包含 childs。等等。

[
  {
    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。

Answer 2

您可以使用递归 html 作为 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>

希望这对您有所帮助。

Answer 3

一种非常简单的方法，也更适合复杂的组件，是使用递归组件。

最终结果：

<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

Angular 6 ngFor指令n维数组

Angular6 ngFor directive n-dimentional array

angularjs-directive

angular