如何在 PrimeNG 表中通過 json 顯示該組？

Question

{
    "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",
            "VehicleNumber": "TN 47 AS 7269",
            "value": "200"
        },
        {
           "date": "2020-06-11",
            "paramValue": "Coolent Oil",
            "VehicleNumber": "TN 47 AS 7269",
            "value": "300" 
        }  
    ],
    "AN 32 GB 3572": [
        {
            "date": "2020-06-11",
            "paramValue": "Fuel consumed",
            "VehicleNumber": "AN 32 GB 3572",
            "value": "300"
        },
        {
            "date": "2020-06-11",
            "paramValue": "Engine Oil",
            "VehicleNumber": "AN 32 GB 3572",
            "value": "400"
        },
        {
            "date": "2020-06-11",
            "paramValue": "Coolent Oil",
            "VehicleNumber": "AN 32 GB 3572",
            "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' },
    { field: 'value', header: 'Engine Oil' },
    { field: 'value', header: 'Coolent Oil' },
    
  ];

樣品表圖像：

Answer 1

您必須像這樣從后端轉換 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