Angular 2中<template *ngFor的等效写法是什么？

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中似乎无法正常工作，正确的做法是什么？

- user3715648

---

请查看 https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html 的语法部分。 - Michael Liu

Answer 1

我想这对你应该有效：

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

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

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

另外，现在您可以使用：

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

这里的优势在于它与普通的DOM元素具有相同的语法。

- Filip Lauc

---

如何使用上述语法获取索引（let i = index）？ - HGB

在Angular 4.x中，它是ng-template。 - Loolooii

HGB，要获取索引，您只需像这样添加let-i="index"： <ng-template ngFor let-parent [ngForOf]="parents" let-i="index"></ng-template> - Filip Lauc

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>

更多内容请参见： https://angular.io/docs/ts/latest/guide/structural-directives.html#!#microsyntax

（注：此文档为关于it技术中的结构指令的内容，详细介绍了微语法。）

- Gynekolog

Answer 3

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

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

更多关于NgFor的详情请参见https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

- Günter Zöchbauer