在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中不起作用.这样做的正确方法是什么？

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元素相同的语法.

你如何使用上面的语法得到索引(`let i = index`)？ (2认同)
在Angular 4.x中,它是`ng-template` (2认同)
HGB,要获得索引,你只需添加let-i ="index",如下所示:<ng-template ngFor let-parent [ngForOf] ="parents"let-i ="index"> </ ng-template> (2认同)

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>