具有条件嵌套对象的 PrimeNg p 表数据源答案

【问题标题】：PrimeNg p-table data source with conditional nested object具有条件嵌套对象的 PrimeNg p 表数据源
【发布时间】：2021-06-04 12:53:03
【问题描述】：

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

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

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

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>

预期结果

【问题讨论】：

标签： angular primeng primeng-turbotable

【解决方案1】：

成功了。对于那些跟随的人；解决方案如下，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>

【讨论】：