* ngНе правильно загружать динамические заголовки таблиц angular2

Question

У меня проблема с загрузкой динамических заголовков таблиц с сервера.Однако, когда они загружаются, вместо отображения по всей таблице, как они должны складываться в один столбец.

Вот 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>

Вот как выглядит массив 'headers':

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

Если что-то мне не хватает, или что ясделал неправильно, пожалуйста, дайте мне знать!

Answer 1

Используйте *ngFor внутри <th> тег

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

Надеюсь, это будет работать для вас!:)