在另一個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>