如何在PrimeNG表中按json显示此组？

问题描述

{
    "TN 47 AS 7269": [
        {
            "date": "2020-06-11","paramValue": "Fuel consumed","VehicleNumber": "TN 47 AS 7269","value": "100"
        },{
            "date": "2020-06-11","paramValue": "Engine Oil","value": "200"
        },{
           "date": "2020-06-11","paramValue": "Coolent Oil","value": "300" 
        }  
    ],"AN 32 GB 3572": [
        {
            "date": "2020-06-11","VehicleNumber": "AN 32 GB 3572","value": "300"
        },"value": "400"
        },"value": "600"
        }
    ]
}

我需要使用PrimeNG在相应的列中绑定车辆登记号和值。如果我通过常规数组列表，则数据显示良好。但是，此json按后端的车辆登记号分组。我不知道该怎么办。我可以在这方面寻求帮助吗？

HTML：

<p-table #tt [columns]="cols" [value]="vehicles" [rows]="10" [paginator]="true" [showCurrentPageReport]="true" 
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,25,50]">

// For Column Header:
<ng-template pTemplate="header" let-columns>
 <tr><th style="width: 10%;" class="text-center">S.No</th>
  <th *ngFor="let col of columns" [style.width]="col.width" [pSortableColumn]="col.field" class="text-center">
        {{col.header}}
 <p-sortIcon *ngIf="col.field" [field]="col.field" ariaLabel="Activate to sort"
    ariaLabelDesc="Activate to sort in descending order"
    ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
    </th>
   </tr>
</ng-template>

// For Table Value:
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
  <tr>
     <td class="text-center">{{rowIndex+1}}</td>
     <td *ngFor="let col of columns" class="text-center">
     <div *ngIf="col.field">
     <span [ngSwitch]="col.field">
     <span *ngSwitchDefault>{{rowData|field:col}}</span>
     </span>
     </div>
     </td>
   </tr>
</ng-template>
</p-table>

TS：

cols = [
    { field: 'VehicleNumber',header: 'Vehicle Registration Number' },{ field: 'value',header: 'Fuel Consumed' },header: 'Engine Oil' },header: 'Coolent Oil' },];

SampleTable图片：

解决方法

例如，您必须像这样从后端转换JSON数据：

this.vehicles = Object.keys(data).map(key => {
  return {
    vehicleNumber: key,fuelConsumed: data[key][0].value,engineOil: data[key][1].value,coolentOil: data[key][2].value
  };
});

您的cols定义很奇怪，我宁愿这样定义：

this.cols = [
  { field: "vehicleNumber",header: "Vehicle Registration Number" },{ field: "fuelConsumed",header: "Fuel Consumed" },{ field: "engineOil",header: "Engine Oil" },{ field: "coolentOil",header: "Coolent Oil" }
];

请参见StackBlitz