Angular2*ngFor中的分组元素

Question

我希望使用Angular2实现以下功能,对于列表中的每个条目,都有一个tr包含多个列的标记,然后是另一个tr跨越所有列的标记(或两个).

<table >
    <tbody>
        <tr>
            <td> field 1 </td>
            <td> field 2 </td>
            <td> field 3 </td>
        </tr>
        <tr>
            <td colspan="3"> Long string goes here </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td colspan="3"> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td colspan="3"> </td>
        </tr>
        ...
    </tbody>
</table>

重复单行很容易:

<tr *ngFor="let good of data['goods']; let i = index">
    <td> good['field1'] </td>
    <td> good['field2'] </td>
    <td> good['field3'] </td>
</tr>

为了一次重复两个tr标签,我必须将tr标签包装成:

<span *ngFor="let good of data['goods']; let i = index">
    <tr>
        <td> good['field1'] </td>
        <td> good['field2'] </td>
        <td> good['field3'] </td>
    </tr>
    <tr>
        <td colspan="3"> good['field4'] </td>
    </tr>
</span>

但由于这是一个表格,它不会在一个范围内包裹一组行,因为这会给我:

<table>
    <span>
        <tr></tr>
        <tr></tr>
    </span>
    <span>
        <tr></tr>
        <tr></tr>
    </span>
    <span>
        <tr></tr>
        <tr></tr>
    </span>
</table>

Angular2是否有一个神奇的组件,允许您对组件进行分组,但随后从生成的HTML中消失(与上面示例中的跨度不同)或其他一些机制来重复一组元素？

Answer 1

您可以使用<template>带有规范结构指令语法的显式元素:

<template ngFor let-good [ngForOf]="data['goods']" let-i="index">
    <tr>
        <td> good['field1'] </td>
        <td> good['field2'] </td>
        <td> good['field3'] </td>
    </tr>
    <tr>
        <td colspan="3"> good['field4'] </td>
    </tr>
</template>