Что эквивалентно <template * ngFor в Angular 2?

Я хочу сделать что-то вроде этого:

<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. Каков правильный способ сделать это?

Ответы

Ответ 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.

Ответ 2

<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

Ответ 3

И для использования индекса 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