如何在pcolumn素数ng数据表中使用嵌套数组

Question

我有一个数组，其中有另一个数组，我使用素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'}]}

]

因此，我的表结构应该类似于第一个列应该有day值，并且从第二个列中，根据条目数组中的元素，应该对所有行重复列。

如何基于主数组中的数组重复<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

我希望我能很好地理解你的需要。

如果我是您，我将做的是通过在institutionalTimetable的每一天和每个条目上循环来重新创建一个数组。

然后，您只需要这样一个简单的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>

见我的柱塞