如何在 PrimeNG table 中按 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

如何在 PrimeNG table 中按 json 显示该组？

How to show this group by json in PrimeNG table?

typescript

primeng

angular

primeng-turbotable