Using ngFor inside another ngFor?

Question

In my Angular program, I'm trying to print out a table for each person in an array that includes all of the days they have taken off. The array with the employees in it is empInfo and the array with the days they have taken off is ptoData. The field in both arrays is EmpKey.

Here's what I've tried so far:

 <div class="panel-body" style="padding-left: 0px;" *ngFor="let emp of empInfo"> <table> <thead> <tr>Employee: {{emp.EmpKey}} {{emp.FirstName}} {{emp.LastName}}</tr> <tr> <td>Date</td> <td>Hours</td> <td>Scheduled</td> <td>Notes</td> </tr> </thead> <tbody> <ng-container *ngIf="pto.EmpKey === emp.EmpKey"> <ng-container *ngFor="let pto of of ptoData"> <tr> <td>{{pto.date}}</td> <td>{{pto.hours}}</td> <td>{{pto.scheduled}}</td> <td>{{pto.notes}}</td> </tr> </ng-container> </ng-container> </tbody> </table> </div>

but here's all that it's printing out:

If I remove <ng-container *ngIf="pto.EmpKey === emp.EmpKey"></ng-container>, it prints out this (which is still not what I'm looking for obviously, but it at least prints out the names):

*ngFor="let pto of of ptoData" looks wrong. Also the order of *ngIf and *ngFor seems wrong too. — pzaenger
– pzaenger, Commented Jul 18, 2017 at 15:22

Poul Kruijt · Accepted Answer · 2017-07-18 15:23:07Z

You should switch the <ng-container> tags, the pto variable is not known yet in the first container. And yes, like pzaenger says, only use one of in your *ngFor ;)

<ng-container *ngFor="let pto of ptoData"> <ng-container *ngIf="pto.EmpKey === emp.EmpKey"> <tr> <td>{{pto.date}}</td> <td>{{pto.hours}}</td> <td>{{pto.scheduled}}</td> <td>{{pto.notes}}</td> </tr> </ng-container> </ng-container>

thanks, much appreciated! and I didn't even notice the double of haha
should also use the *ngIf on the tr tag. No point in adding an extra ng-container here.

Collectives™ on Stack Overflow

Using ngFor inside another ngFor?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related