primeng avec JSON imbriqué dans angulaire 4

Question

J'utilise p-dataTable avec suivant objet 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'} 
     ] 
    }, 
] 

Voici mon code HTML pour p-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> 

je dois obtenir la sortie suivante tableau:

quelqu'un peut-il me aider à obtenir le correspondin g sortie?

Answer 1

Vous pouvez initialiser les colonnes de livraison dans un Col. tableau:

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

et itérer ensuite sur elle:

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

Voici un travail plunkr