Блог

 {
    "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' },
    
  ];
  

Образцовое изображение:

Вы должны преобразовать свои данные 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