Primeng 如何在Priming databale中动态绑定columnName和Value的通用方法

我们的想法是在不同的页面中有100个网格，只有columnkey和值是不同的

我有primengDatatable，这是服务器模型。我需要根据列键显示网格标题，并设置基于值的单元格值。这是显示网格所需的通用列名和基于的值。目前，我已经提供了productName、ProductSKu和price，但这不是一个它将根据响应进行更改的列

{  columnKey: 'ProductName',
                      cellValue: 'nokia',
                  },

服务数据：

    getDataFromServer(){
               let serverResponse: any = {
                gridRows: [{
                   gridColumns: [{
                        columnKey: 'ProductName',
                        cellValue: 'samsung',
                    },
                    {
                        columnKey: 'ProductSKU',
                        cellValue: '123',
                    },
                    {
                        columnKey: 'ProductPrice',
                        cellValue: '100',
                    }],
                },
                {
                   gridColumns: [{
                        columnKey: 'ProductName',
                        cellValue: 'nokia',
                    },
                    {
                        columnKey: 'ProductSKU',
                        cellValue: '889',
                    },
                    {
                        columnKey: 'ProductPrice',
                        cellValue: '12344',
                    }],
                },
                ],
                }
            }.




**Here is the component.html**
<p-table #dt stateStorage="local"
 stateKey="statedemo-local"
[responsive]="true" 
appendTo="body" styleClass="ui-table-customers" dataKey="id" [rowHover]="true" [value]="gridLists" [paginator]="true" [rows]="10" [columns]="cols" scrollHeight="100px" [showCurrentPageReport]="true"
   currentPageReportTemplate="Showing 1   to 10  out of {totalRecords} entries"
   [lazy]="false"
   [resizableColumns]="true" [autoLayout]="true">
   <ng-template pTemplate="caption">
       <div class="ui-helper-clearfix" style="text-align: left">
       </div>
   </ng-template>
   <ng-template pTemplate="header" let-columns>
       <tr>
         
           <th *ngFor="let col of columns">
               {{col.header}}  
           </th>
       </tr>
     
   </ng-template>
   <ng-template pTemplate="body" let-rowData let-columns="columns" let-i="rowIndex">
           <td>
               <p-cellEditor>
                   <ng-template pTemplate="input">
                       <input pInputText type="text" [(ngModel)]="rowData.columnKey">
                   </ng-template>
                   <ng-template pTemplate="output">
                       {{rowData.cellvalue}}
                   </ng-template>
               </p-cellEditor>
           </td>


   </ng-template>
</p-table>

否则，解决方案：

这是提供这种结构数据的第三方服务，所以我不必像下面那样修改它。 如果我喜欢下面的结构，它会工作

我需要重新构造从服务器接收到的响应数据，以修改上述内容，如下所示。columnkey和值这样才能工作

[{ProductName:'samsung'，ProductSKU:'123'，ProductPrice:'100'}， {ProductName:'nokia'，ProductSKU:'456'，ProductPrice'：'1244'} {....} ]

演示：：

不同格式的工作版本