如何创建末尾带有附加元素的 Angular 2 列表

Question

我正在使用ngFor创建一个分组列表 - 列表中的列表。

在列表的末尾，我想添加一个不属于枚举的额外元素。

我已经尝试了一些事情，但不能完全正确，我应该如何使用 angular2 做到这一点？

通常你会有这个：

<ion-item-group *ngFor="#item of myFirstArray">
    <ion-item-divider light>{{item.name}}</ion-item-divider>
    <ion-item *ngFor="#secondItem of item.mySecondArray; #i = index; #isLast = last">
         {{secondItem.name}} from {{item.name}}
    </ion-item>
</ion-item-group>

这是我尝试过的：

<ion-item-group *ngFor="#item of myFirstArray">
    <ion-item-divider light>{{item.name}}</ion-item-divider>
    <element *ngFor="#secondItem of item.mySecondArray; #i = index; #isLast = last">
        <ion-item>
             {{secondItem.name}} from {{item.name}}
        </ion-item>
        <ion-item *ngIf="isLast">
             Something else is here.
        </ion-item>
    </element>
</ion-item-group>

这当然有效，但我认为element不应该作为 Angular2 的一部分渲染，但它确实弄乱了样式表。

我应该如何正确执行此操作？

谢谢

Answer 1

您可以使用带有显式<template>标记的规范形式的ngFor

<ion-item-group *ngFor="#item of myFirstArray">
    <ion-item-divider light>{{item.name}}</ion-item-divider>
    <template ngFor let-secondItem [ngForOf]="item.mySecondArray" let-i="index" let-isLast="last">
    <!-- old `#` syntax
        <template ngFor #secondItem [ngForOf]="item.mySecondArray" #i="index" #isLast="last">
    -->
        <ion-item>
             {{secondItem.name}} from {{item.name}}
        </ion-item>
        <ion-item *ngIf="isLast">
             Something else is here.
        </ion-item>
    </template>
</ion-item-group>

（假设新的ngFor语法带有let而不是#）

另请参阅 https://angular.io/docs/ts/latest/api/common/NgFor-directive.html