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