更改 Angular2 组件的标准行为
Change standard behavior of Angular2 Component
我有一个带有 table 模板的组件。
这是部分:
<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。如果我尝试将它用作另一个组件,table 会中断。
是否有一种巧妙的方法可以在循环中的每个 tr 之后插入另一个 tr?或者也许有一种在他的模板上交换组件选择器的方法
你可以使用tbody
<tbody *ngFor="let stat of statistic" class="stripped">
<tr></tr>
<tr></tr>
</tbody>
形成这个 answer 你可以在一个 table 中有多个 tbody。
使用 bootstrap 网格系统而不是 table 可以做到这一点。
如您在评论中所说,您想要使用相同的数据,但需要两个 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
我有一个带有 table 模板的组件。
这是部分:
<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。如果我尝试将它用作另一个组件,table 会中断。
是否有一种巧妙的方法可以在循环中的每个 tr 之后插入另一个 tr?或者也许有一种在他的模板上交换组件选择器的方法
你可以使用tbody
<tbody *ngFor="let stat of statistic" class="stripped">
<tr></tr>
<tr></tr>
</tbody>
形成这个 answer 你可以在一个 table 中有多个 tbody。
使用 bootstrap 网格系统而不是 table 可以做到这一点。
如您在评论中所说,您想要使用相同的数据,但需要两个 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