primeng在角4

Question

嵌套的JSON我使用P-的dataTable有以下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'} 
     ] 
    }, 
] 

這裏是對的dataTable

<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> 

我的HTML代碼，我需要得到下面的輸出表：

誰能幫我拿到correspondin g輸出？

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> 

這裏是一個工作plunkr