顯示嵌套表

Question

我正在嘗試顯示這樣的表格。

我已經看過： How to make nested table structure in angular? 這已經對我接近我的目標有很大的幫助。

目前我正在嘗試這樣的事情：

  <ng-container *ngFor="let groupRowData of selectedEmployee.skills;">
    <ng-container *ngFor="let subGroupRowData of groupRowData.subGroups; let $index1 = index">
      <ng-container *ngFor="let skillRowData of subGroupRowData.skills; let $index2 = index">
      <tr>
        <th *ngIf="$index1 === 0" [attr.rowspan]="groupRowData.subGroups.length + subGroupRowData.skills.length">{{ groupRowData.name }}</th>
          <th *ngIf="$index2===0;" [attr.rowspan]="subGroupRowData.skills.length">{{ subGroupRowData.name }}</th>
          <td>{{ skillRowData.name }}</td>
          <td>{{ skillRowData.rating }}</td>
      </tr>
      </ng-container>
    </ng-container>
  </ng-container>

但它確實看起來像熱垃圾......軟技能和技術知識應該是 A 組和 B 組，項目和支持子組 A 和 B，業務領域和汽車傳動和傳動系統應該是子組 C 和 D

Answer 1

想出了解決我的特定問題的方法，會發布答案以防萬一有人遇到類似問題。

短提醒，“selectedEmployee”是

    export class Entry {
      general: GeneralInfo;
      skills: SkillGroup[];
    }

其中 SkillGroup 是一個嵌套的數據結構，如下所示：

export class SkillGroup {
  name: string;
  subGroups?: SubSkills[];
}

export class SubSkills {
  name: string;
  skills: Skill[];
}

export class Skill {
  name: string;
  rating: number;
}

考慮到這一點，這產生了預期的結果：

<div *ngIf="selectedEmployee">

  <ng-container *ngFor="let groupRowData of selectedEmployee.skills;">
    <ng-container *ngFor="let subGroupRowData of groupRowData.subGroups; let $index1 = index">
      <ng-container *ngFor="let skillRowData of subGroupRowData.skills; let $index2 = index">
      <tr>
        <th *ngIf="$index1 === 0 && $index2 === 0" [attr.rowspan]="groupRowData.subGroups.length + subGroupRowData.skills.length">{{ groupRowData.name }}</th>
          <th *ngIf="$index2 === 0;" [attr.rowspan]="subGroupRowData.skills.length">{{ subGroupRowData.name }}</th>
          <td>{{ skillRowData.name }}</td>
          <td>{{ skillRowData.rating }}</td>
      </tr>
      </ng-container>
    </ng-container>
  </ng-container>
</div>

生成一個如下所示的表：