Where to put nested for each loops in an Angular component table?

1
votes

I have several tables which get displayed within a for each loop. Within each table row there are two additional for each loops which both apply to the items in a row

I am not sure where to put the second for each loop. I can do something like this

<div *ngFor="let table of tables">{{table}}
  <table>
    <tr *ngFor="let item of key">{{item.name}}</tr>
  </table>
</div>

to display the first set of data. However some of the properties I need to display in the trs are nested within an array within item so I need one more for each.

My initial attempt was to try to add another tag (surround tr with div/span, move let item of key to an *ngFor there, add final *ngFor to tr) but those can't be nested within tbody/table:

<div *ngFor="let table of tables">{{table}}
  <table>
    <div *ngFor="let item of key">
      <tr *ngFor="let subItem of item">
        <td>{{item.name}}</td>
        <td>{{subItem.address}}</td>
      </tr>
    <div>
  </table>
</div>

Is there a valid tag I can use? Can I do two *ngFor on one tag?

2
angular

2 Answers

1
votes

You can use the ng-container tag for the last for each loop. So the code will look like

<div *ngFor="let table of tables">{{table}}
  <table>
     <ng-container *ngFor="let item of key">
       <tr *ngFor="let subItem of item">
         <td>{{item.name}}</td>
         <td>{{subItem.address}}</td>
       </tr>
     <ng-container>
  </table>
</div>
0
votes

You should do the ngFor in this second case in a td

Something like

<tr *ngFor="let item of key">
  <td>{{item.name}}</td>
  <td>{{item.otherAttr}}</td>

  <td *ngFor="let subItem of item.someAttrThatIsAnArray">
    {{subItem}}
  </td>
</tr>

the proper markup will depend on how this data has been built.