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>

Answer 2

使用模板或ng-container指令

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <tr>...</tr>
  <tr>...</tr>
</template>

或

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <tr>...</tr>
  <tr>...</tr>
</ng-container>

同样适用于ngIf，ngSwitch

Angular2 * ngFor中的分组元素

2 个答案: