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

是的，可以使用模板（myproject/src/foopackage/VittuSaatana.java / ng-template）：

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

ngTemplateOutlet

您可以使用ul / li代替divs。

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

Angular6 ngFor指令n维数组

3 个答案: