Я хочу сделать что-то вроде этого:
<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. Каков правильный способ сделать это?
Я думаю, это должно сработать для вас:
<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.
<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
И для использования индекса 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