带有条件嵌套对象的 PrimeNg p 表数据源

如何解决带有条件嵌套对象的 PrimeNg p 表数据源

我有一个资源数组，其中列出了员工数据，即姓名、角色、部门等。此外，每个对象还有一个数组，显示了每个员工的分配，即 projId、workHrs..

在构建 p 表时，我无法为 resources.assignments 中的特定 projId 挑选出 workHrs .. 我得到的是每个分配对象 workHrs。

如何有条件地检索特定 projId 的 workHrs 以及所有主要员工数据？

.TS

  ngOnInit() {

    this.columns = [
      { field: 'name',header: 'Resource',width: '20%' },{ field: 'role',header: 'Role',{ field: 'dept',header: 'Dept',{ field: 'workHrs',header: 'Work Hrs',width: '20%' }
    ];

    this.resources = [
      {
        name: 'Bob',role: 'Developer',dept: 'CIO',assignments: [
          { projId: '001',workHrs: 3 },{ projId: '002',workHrs: 1 }
        ]
      },{
        name: 'Peter',role: 'Accountant',dept: 'Finance',workHrs: 6 },{ projId: '004',workHrs: 8 }
        ]
      }
    ];

  }

.HTML

<p-table
  [value]="resources"
  [columns]="columns"
  styleClass="p-datatable-striped">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
        <div>{{col.header}}</div>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-resources let-columns="columns">
    <tr>
      <td *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
        <span *ngIf="col.field !== 'workHrs' ">{{resources[col.field]}}</span>

        <span *ngIf="col.field == 'workHrs'">
          <span *ngFor="let hours of resources.assignments;">
            {{hours[col.field]}}
          </span>
        </span>
      </td>
    </tr>
  </ng-template>
</p-table>

预期结果

解决方法

成功了。对于那些追随者；下面的解决方案，stackblitz 已更新

<span *ngIf="col.field == 'workHrs'">
 <span *ngFor="let hours of resources.assignments;">
   <span *ngIf="hours[col.subfield] == project_id">{{hours[col.field]} </span>
     </span>
       </span>