javascript - 如何在pcolumn prime ng数据表中使用嵌套数组

Question

我有一个数组，其中有另一个数组，我使用 prime ng 数据表来显示该数组中的数据，请看一下下面的数组结构:

this.institutionalTimetable = [
{day: "Monday", entries: [{startTime: "132", endTime: "789", recess: true, subject: 'English', subjectGroup:'Maths' }, {startTime: "582", endTime: "634", recess: true, subject: 'English' , subjectGroup: 'Maths'}]},
{day: "Tuesday", entries: [{startTime: "132", endTime: "789", recess: true, subject: 'English', subjectGroup:'Maths' }, {startTime: "582", endTime: "634", recess: true, subject: 'English' , subjectGroup: 'Maths'}, {startTime: "582", endTime: "634", recess: true, subject: 'English' , subjectGroup: 'Maths'}]},
{day: "Wednesday", entries: [{startTime: "132", endTime: "789", recess: true, subject: 'English', subjectGroup:'Maths' }, {startTime: "582", endTime: "634", recess: true, subject: 'English' , subjectGroup: 'Maths'}]}

]

所以我的表结构应该像第一列应该有日期值 并且从基于条目数组内的元素的第二列开始，应该对所有行重复这些列

我应该如何重复<p-column>基于主数组内部的数组？

这是我尝试过的:

<p-dataTable [value]="institutionalTimetable" class="institutetable" >
  <p-headerColumnGroup >
    <p-row>
      <p-column header="Week Days"></p-column>
      <p-column header="Time table" [colspan]="10"></p-column>
    </p-row>
  </p-headerColumnGroup>
  <p-column field="day"></p-column>
  <p-column field="entries" *ngFor="let entrys of entries">
    <ng-template let-col let-entryData="rowData" pTemplate="body">
     
      <span>{{ entrys.startTime }}</span>

    </ng-template>
  </p-column>
</p-dataTable>

Answer 1

我希望我已经充分理解您的需求。

如果我是你，我会做的是通过循环每天和机构时间表的每个条目来重新创建一个数组。

然后，您将拥有一个简单的dataTable，如下所示:

<p-dataTable [value]="institutionalTimetable2" class="institutetable" >
  <p-headerColumnGroup >
    <p-row>
      <p-column header="Week Days"></p-column>
      <p-column header="Time table" [colspan]="5"></p-column>
    </p-row>
  </p-headerColumnGroup>
  <p-column field="day"></p-column>
  <p-column field="startTime"></p-column>
  <p-column field="endTime"></p-column>
  <p-column field="recess"></p-column>
  <p-column field="subject"></p-column>
  <p-column field="subjectGroup"></p-column>
</p-dataTable>

查看我的Plunker