我们如何将嵌套对象传递给 PrimeNG 动态表答案

【问题标题】：How we can pass nested Object to PrimeNG Dynamic Table我们如何将嵌套对象传递给 PrimeNG 动态表
【发布时间】：2020-10-15 23:57:11
【问题描述】：

我有嵌套对象，我想将它传递给 PrimeNG 动态表，但它看起来没有发生。无论我在哪里嵌套对象，我都会像往常一样传递它，但不会发生。

PrimeNG 是否需要遵循任何特定规则

.html

<p-table [columns]="cols" [value]="MyData">
    <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">
        <tr>
            <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

.ts

this.cols = [
    { field: 'NAME', header: 'Name' },
    {field: 'AGE', header: 'Age' },
    {field: 'ADDRESS.POSTCODE', header: 'Post Code' }
    {field: 'ADDRESS.ZIPCODE', header: 'Zip' }
];

.JSON

[
  {
    "NAME": "ABC",
    "AGE": "000",
    "ADDRESS": {
      "POSTCODE": "00",
      "ZIPCODE": "1212"
    }
  },
  {
    "NAME": "XYZ",
    "AGE": "000",
    "ADDRESS": {
      "POSTCODE": "00",
      "ZIPCODE": "1212"
    }
  }
]

【问题讨论】：

你能创建一个 StackBlitz 或者至少分享你所有的 TS 组件吗？

标签： angular typescript primeng primeng-table

【解决方案1】：

在你的组件中创建一个这样的函数：

parseFieldInData(data: any, field: string) {
  return field.includes('.')
    ? field.split('.').reduce((acc: any, obj: any) => acc[obj], data)
    : data[field];
}

并且在您的组件的 html 上使用上面的函数传递数据和字段，如下所示：

<p-table [columns]="cols" [value]="MyData">
    <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">
        <tr>
            <td *ngFor="let col of columns">
                    {{ parseFieldInData(data, col.field) }}
            </td>
        </tr>
    </ng-template>
</p-table>

这适用于嵌套对象和嵌套对象内的嵌套对象......

【讨论】：