Create Angular2 Table Header with *ngFor loop

Question

So, my problem is so basic but i cant solve it.

I'm trying to create dynamic table header with *ngFor.

<table>
  <tr>
        <th>Entry Warehouse</th>
        <th colspan="2" *ngFor="let data of datas">
          SomeText
        </th>
  </tr>
  <tr>
       <th>More Text</th>
       <div *ngFor="let data of datas">
         <th>A little text again</th>
         <th>A little text again</th>
       </div>
  </tr>
</table>

Anyway, this solution suicide themself at that point. If datas length more than 1, div tag is underscoring th tag in same cell. If i try another solution like this;

<table>
  <tr>
        <th>Entry Warehouse</th>
        <th colspan="2" *ngFor="let data of datas">
          SomeText
        </th>
  </tr>
  <tr>
       <th>More Text</th>
       <th *ngFor="let data of datas">A little text again</th>
       <th *ngFor="let data of datas">A little text again</th>
  </tr>
</table>

it looks like works but actually not. Because at this time the next th tag doesnt start before the previous loop ends.

Can you add your JSON data?

Pardeep Jain
– Pardeep Jain

2018-11-28 14:25:09 +00:00
Commented Nov 28, 2018 at 14:25 — Pardeep Jain
– Pardeep Jain, Commented Nov 28, 2018 at 14:25

Geetesh · Accepted Answer · 2018-11-28 14:34:05Z

4

In angular 2+ you can use<ng-container> tags

<ng-conatiner *ngFor="let i of items">
<th>i</th>
</ng-conatiner>

answered Nov 28, 2018 at 14:34

Geetesh

3152 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Create Angular2 Table Header with *ngFor loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related