角4中嵌套json的素数

Question

我使用的是和以下JSON对象

skuReportList:any[]= [
    {
      'sku':102,
      'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':'34','drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':'34','drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':'34','drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
    {'sku':103,'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
    {'sku':104,'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
    {'sku':103,'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
    {'sku':104,'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
]

以下是p-dataTable的HTML代码

<p-dataTable *ngIf="showSkuLevelReport" [value]="skuReportList" scrollable="true" scrollHeight="calc(100vh - 390px)"  [paginator]="false" 
    responsive="true" [resizableColumns]="false" [globalFilter]="gb" #dt [rows]="8" class="custom-pagi" [hidden]="inCall">

        <p-column title="sku" field="sku" header="SKU" [style]="{'width':'120px'}" styleClass="border-column" sortable="true"></p-column>
        <p-column title="name" field="name" header="Item Name" styleClass="no-border-column text-left"></p-column>
        <p-column *ngFor="let onecol of deliveryrange;let i = index" [field]="onecol.qty" [header]="onecol.date" [editable]="false" [sortable]="false">
        </p-column>
 </p-dataTable>

我需要得到以下输出表：

​

​

有人能帮我得到相应的输出吗？

Answer 1

可以在cols数组中初始化传递列：

for (var i = 0; i < this.skuReportList[0].deliveryrange.length; i++) {
    this.cols.push({ header: 'DELIVERY ' + this.skuReportList[0].deliveryrange[i].date });
}

然后迭代它：

<p-column *ngFor="let col of cols;let i = index" [header]="col.header">
    <ng-template let-row="rowData" pTemplate type="body">
        <b>{{row.deliveryrange[i].qty}}</b>
    </ng-template>
</p-column>

这是一个工作的普鲁克尔