PrimeNg p-table data source with conditional nested object

Question

I have a resources array that lists employee data i.e name, role, dept etc.. in addition, each object also has an array showing the each employees' assignments i.e projId, workHrs..

When building p-table, im unable to single out workHrs for a specific projId in resources.assignments .. what i get, is each assignment object workHrs.

How can i conditionally retrieve workHrs for a specific projId, along with all the primary employee data ?

stackblitz

.TS

  ngOnInit() {

    this.columns = [
      { field: 'name', header: 'Resource', width: '20%' },
      { field: 'role', header: 'Role', width: '20%' },
      { field: 'dept', header: 'Dept', width: '20%' },
      { 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',
        assignments: [
          { projId: '001', 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>

Expected Outcome

Answer 1

nailed it. for those who follow; solution below, stackblitz updated

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