angular - Angular 6：在表格中呈现嵌套的 JSON

Question

我有一个嵌套的 JSON 结构，需要在表中表示。结构是：

students = [
  {
    "id": "1",
    "name": "Ram",
    "subjects": [
      {
        "id": "101",
        "name": "Maths",
        "exams": [
          {
            "id": "1",
            "name": "exam1",
            "score": "90"
          },
          {
            "id": "2",
            "name": "exam2",
            "score": "80"
          }
        ]
      },
      {
        "id": "102",
        "name": "English",
        "exams": [
          {
            "id": "1",
            "name": "exam1",
            "score": "95"
          },
          {
            "id": "2",
            "name": "exam2",
            "score": "85"
          }
        ]
      }
    ]
  },
  {
    "id": "2",
    "name": "Ajay",
    "subjects": [
      {
        "id": "101",
        "name": "Maths",
        "exams": [
          {
            "id": "1",
            "name": "exam1",
            "score": "80"
          },
          {
            "id": "2",
            "name": "exam2",
            "score": "90"
          }
        ]
      },
      {
        "id": "102",
        "name": "English",
        "exams": [
          {
            "id": "1",
            "name": "exam1",
            "score": "85"
          },
          {
            "id": "2",
            "name": "exam2",
            "score": "95"
          }
        ]
      }
    ]
  }
];

我正在使用pringng的p-table。我需要有如下的表格前景：

任何人都可以分享他们在渲染嵌套 json 方面的经验。

我已经在 div 中尝试过嵌套表和嵌套循环，但是布局搞砸了。

带有 p-table(primeng) 的示例代码：

<p-table #dt [value]="students" [responsive]="true"  [paginator]="true" [rows]="5" 
[rowsPerPageOptions]="[5,10,25,50]" [autoLayout]="true" [globalFilterFields]="['name']" [scrollable]="true" scrollHeight="400px" frozenWidth="300px" >
<ng-template pTemplate="header">

  <tr class="table-header">
    <th style="width:18%" class="table-header-column" >
      <span>Student Name</span>
    </th>
    <th style="width:8%" class="table-header-column"  rowspan="2">
      Subject
    </th>
    <th style="width:6%" class="table-header-column"  rowspan="2">
      Marks
    </th>
  </tr>
  <tr class="table-header">
    <th>
        <input placeholder="Search Student" pInputText size="25"  type="text"
        (input)="dt.filterGlobal($event.target.value, 'contains')">
    </th>

  </tr>
</ng-template>
<ng-template pTemplate="body" let-student>
  <div *ngFor="let subject of student.subjects; index as i" class="table-cell-color">
    <tr *ngFor="let exam of subject.exams; index as j" class="table-cell-color">      
          <td>{{student.name}}</td>
          <td>{{subject.name}}</td>
          <td>{{exam.score}}</td>
    </tr>
  </div>
</ng-template>
</p-table>

输出：

带有 mdbBootstrap 的 mdbTable 示例：

<table class="table table-bordered" mdbTable mdbTableScroll scrollY="true" scrollX="true" >
  <thead>
    <tr class="table-header">
      <th  >Student Name</th>
      <th >Subject</th>
      <th >Marks</th>
    </tr>
  </thead>
  <tbody>
     <tr mdbTableCol *ngFor="let student of students" >
        <div *ngFor="let subject of student.subjects;">
            <div *ngFor="let exam of subject.exams; index as i">
                <td >{{student.name}}</td>
                <td >{{subject.name}}</td>
                <td >{{exam.name}}</td>
            </div>
        </div>
      </tr>
  </tbody>
</table>

输出：

如果有人可以分享他们的想法，那就太好了。如果需要，我愿意切换到任何其他图书馆。