1

我有嵌套对象，我想传递给 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"
    }
  }
]
4

1 回答 1

0

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

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>

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

于 2021-11-28T19:30:01.593 回答