*ngFor not loading dynamic table headers correctly angular2

Question

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!

<thead> <tr *ngFor="let title of headers"> <th class='table-header'>{{title['COLUMN_NAME']}}</th> </tr> </thead> works fine for me. — Lia
– Lia, Commented May 26, 2018 at 7:14

coder · Accepted Answer · 2018-05-26 07:12:29Z

4

Use *ngFor inside <th> tag

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

Hope this will work for you! :)

answered May 26, 2018 at 7:12

coder

8,74216 gold badges41 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Galloway Over a year ago

Worked like a charm! Can't believe I didn't think of this first lol

coder Over a year ago

Cheers! glad to here that :)

Collectives™ on Stack Overflow

*ngFor not loading dynamic table headers correctly angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related