Build a table with exactly two rows from an array of objects where header row consists of one value and one row of the other using ngfor

user_10228531 0
Viewed 31

I am using angular in a new project. Very much wondering how this, which does the trick, can be written more elegantly with eg only 1 *ngFor ?

<table>
<tr>
<th *ngFor="let verdeling of maandverdeling ">{{verdeling.month}}</th>
</tr >
<tr>
<th *ngFor="let verdeling of maandverdeling ">{{verdeling.hc}}</th>  
</tr>
</table>

The array maandverdeling is made like this :

[{month : "1", hc :"15.2"},...,{month : "12", hc :"19.2"}]

And so basically I want only one table header with all months and one table row with all cooresponding hc's. Although it is an option to change the data format using the value of month as the key for hc, I don't see how it would solve my problem.

Thanks a bundle.

angular typescript
1 Answers
<table>
 <tr *ngFor="let i of [0,1]">
   <ng-container *ngFor="let verdeling of maandverdeling">
     <th *ngIf="!i">{{verdeling.month}}</th>
     <td *ngIf="i">{{verdeling.hc}}</th>
   </ng-container>
 <tr>
</table>
user_85581860
Related