在另一个ngFor中使用ngFor？

Question

在我的Angular程序中，我试图打印出一个数组中每个人的表格，其中包括他们已经离开的所有日子。阵列中的员工是empInfo，他们已经离开的阵列是ptoData。两个阵列中的字段为EmpKey。

这里是我试过到目前为止：

 <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>

但这里的一切，它的打印出来：

如果我删除<ng-container *ngIf="pto.EmpKey === emp.EmpKey"></ng-container>，它打印出来这（这仍然不是我正在寻找的东西，但它至少是印刷品出了名）：

Answer 1

你应该切换<ng-container>标签，该pto变量尚未在第一容器闻名。是的，像pzaenger说，只使用一个of在*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>