Question

=“”

我想要做这样的事情：

<div *ngFor="let parent of parents">
    <div *ngFor="let child of parent.children">
    </div>
</div>

但我不想要额外的外部div。根据我能够找到的搜索，在Angular 1中，我可以通过这样做来实现这一点：

<template *ngFor="let parent of parents">
    <div *ngFor="let child of parent.children">
    </div>
</template>

但这似乎并不适用于Angular 2。这样做的正确方法是什么？

Answer 1

我认为这应该适合你：

<ng-template ngFor let-parent [ngForOf]="parents">
   <div *ngFor="let child of parent.children">
   </div>
</ng-template>

您可以在这里阅读更多内容：

您现在也可以使用：

<ng-container *ngFor="let parent of parents">
   <div *ngFor="let child of parent.children">
   </div>
</ng-container>

这里的优点是它具有与普通dom元素相同的语法。

Answer 2

索引使用let-i="index"：

<template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</template>

Answer 3

<ng-container>的行为类似于<template>标记（它未添加到DOM中），但允许使用更方便的*foo结构指令语法：

<ng-container *ngFor="let parent of parents">
    <div *ngFor="let child of parent.children">
    </div>
</ng-container>