0

我有一个带有表格模板的组件。

这是部分：

<tr *ngFor="let stat of statistic" class="stripped">
        <td>{{stat.date         | date:"shortDate"}}</td> 
        <td>{{stat.hits         | number }}</td>
        <td>{{stat.unique       | number }}</td>
        <td>{{stat.registrations| number }}</td>
        <td>{{stat.conversion   | number }}</td>
        <td>{{stat.deposit      | number }}</td>
        <td>{{stat.ftd          | number }}</td>
        <td class="bold">{{stat. deals | number }}</td>
        <td class="bold colored">{{stat.profit| currency:'USD':true:'1.2' }}</td>
</tr>

但是我需要插入两个而不是 tr。如果我尝试将其用作另一个组件，则表格会中断。

是否有一种棘手的方法可以在循环中的每个 tr 之后插入另一个 tr ？或者也许有一种在他的模板上交换组件选择器的方法

4

2 回答 2

1

正如您在评论中所说，您想使用相同的数据但想要两个tr，所以您可以尝试这个：-

<template ngFor let-stat [ngForOf]='statistic'>
    <tr class="stripped">
        <td>{{stat.date | date:"shortDate"}}</td>
        <td>{{stat.hits | number }}</td>
        <td>{{stat.unique | number }}</td>
        <td>{{stat.registrations| number }}</td>
        <td>{{stat.conversion | number }}</td>
        <td>{{stat.deposit | number }}</td>
        <td>{{stat.ftd | number }}</td>
        <td class="bold">{{stat. deals | number }}</td>
        <td class="bold colored">{{stat.profit| currency:'USD':true:'1.2' }}</td>
    </tr>
    <tr class="stripped">
        <td>{{stat.date | date:"shortDate"}}</td>
        <td>{{stat.hits | number }}</td>
        <td>{{stat.unique | number }}</td>
        <td>{{stat.registrations| number }}</td>
        <td>{{stat.conversion | number }}</td>
        <td>{{stat.deposit | number }}</td>
        <td>{{stat.ftd | number }}</td>
        <td class="bold">{{stat. deals | number }}</td>
        <td class="bold colored">{{stat.profit| currency:'USD':true:'1.2' }}</td>
    </tr>
</template>

有关在 angular2 中使用 *ngFor 的更棘手的方法，请参见此处 https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

于 2016-05-28T05:17:31.807 回答
0

您可以使用 tbody

<tbody *ngFor="let stat of statistic" class="stripped">
   <tr></tr>
   <tr></tr>
</tbody>

形成这个答案，您可以在一个表中有多个 tbody。

使用引导网格系统而不是表可以解决问题。

于 2016-05-28T05:10:49.513 回答