CODEWITHSUNDEEP
angularhtml
David Galloway
David Galloway

Reputation: 45

*ngFor not loading dynamic table headers correctly angular2

I'm having a problem where I am loading dynamic table headers from a server. However, when they load, instead of displaying across the table like they should they stack up in one column.

Here is the html:

                 <tr *ngFor="let title of headers">
                 <th class='table-header'>{{title['COLUMN_NAME']}}</th>
             </tr>
             </thead>
             <tbody >
                 <tr *ngFor="let item of data | paginate : {itemsPerPage: 25, currentPage: p} ">
                     <td>{{item.ID}}</td>
                     <td>{{item['78d00422ce41_POWER']}}</td>
                     <td>{{item['78d00422ce41_TIME']}}</td>
                     <td>{{item['78d00422821c_POWER']}}</td>
                     <td>{{item['78d00422821c_TIME']}}</td>


             </tr>
             </tbody>

heres what the 'headers' array looks like:

[  
   {  
      "COLUMN_NAME":"ID"
   },
   {  
      "COLUMN_NAME":"78d00422ce41_POWER"
   },
   {  
      "COLUMN_NAME":"78d00422ce41_TIME"
   },
   {  
      "COLUMN_NAME":"78d00422821c_POWER"
   },
   {  
      "COLUMN_NAME":"78d00422821c_TIME"
   }
]

If there's something I'm missing, or that I did wrong, please let me know!

Upvotes: 0

Views: 2102

Answers (1)

coder
coder

Reputation: 8712

Use *ngFor inside <th> tag

<th *ngFor="let title of headers" class='table-header'>{{title['COLUMN_NAME']}}</th>

Hope this will work for you! :)

Upvotes: 4

Related Questions