Standardverhalten von Angular2 ändern Komponente

Question

Ich habe eine Komponente mit Tabellenvorlage.

Dies ist Teil:

<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> 

Aber statt tr brauche ich zwei einzufügen. Wenn ich versuche, es als eine andere Komponente zu verwenden, bricht eine Tabelle.

Gibt es eine knifflige Möglichkeit, nach jedem tr im Zyklus einen weiteren tr einzufügen? Oder hat vielleicht eine Möglichkeit des Austausches Komponentenselektor auf seine Vorlage

Answer 1

wie Sie sagten in Kommentar, den Sie dieselben Daten verwenden möchten, aber wollen zwei tr so können Sie dieses versuchen: -

<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> 

hier für weitere knifflige Weise sehen der Verwendung * ngFor in angular2 https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

Answer 2

Sie tbody

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

Formular dieses answer verwenden, können Sie mehrere tbody in einer Tabelle haben kann.

Verwenden Bootstrap-Grid-System anstelle von Tabelle kann den Trick tun.