我正在按照primeng docs中给出的模板选项在primeng数据表列中创建与列数据并排的链接，但我无法使用{{data [col.field]}}显示嵌套对象。

<p-column [field]="col.field" [header]="col.header" [sortable]="col.sortable" [filter]="col.filter" [editable]="col.editable" [filterPlaceholder]="col.filterPlaceholder" styleClass="{{col.class}}"> 
                <ng-template let-col let-data="rowData" let-ri="rowIndex" pTemplate="body"> 
                    <span *ngIf="!col.field.includes('.')" >{{data[col.field]}}</span> 
                    <!-- <span *ngIf="col.field.includes('.')">{{data[col.field.split('.')[0]][col.field.split('.')[1]]}}</span> this does not work because field is like x.y--> 
                    <!-- I have some other buttons here as well -->  
                </ng-template> 
        </p-column> 

<p-dataTable [globalFilter]="gb" [filterDelay]=1000 [value]="tableData" [alwaysShowPaginator]="true" [rowStyleClass]="setStyle" [rows]="rows" [paginator]="paginate" [alwaysShowPaginator]="false" [resizableColumns]="true" tableStyleClass="table-wrap {{rowClass}}" 
    [rowsPerPageOptions]="[5,10,20]" expandableRows="{{setExpander}}" [editable]="setEditable" (onRowClick)="handleRowSelect($event)" [lazy]="pagination" [totalRecords]="totalRecords" (onLazyLoad)="loadLazy($event)" [ngClass]="{'paginator-table': pagination}"> 
    <div *ngFor="let col of tableOptions.columns, let index=index, let odd=odd, let even=even"> 
        <p-column *ngIf="col.field" [field]="col.field" [header]="col.header" [sortable]="col.sortable" [filter]="col.filter" [editable]="col.editable" [filterPlaceholder]="col.filterPlaceholder" styleClass="{{col.class}}"> 
            <ng-template let-col let-data="rowData" let-ri="rowIndex" pTemplate="body"> 
                    <span *ngIf="!col.field.includes('.')" >{{data[col.field]}}</span> 
                    <!-- <span *ngIf="col.field.includes('.')">{{data[col.field.split('.')[0]][col.field.split('.')[1]]}}</span> this does not work because field is like x.y--> 
                <a *ngIf="col.field === 'ticket'" target="_blank" href={{link}}{{data[col.field]}}><i class="fa fa-external-link" aria-hidden="true"></i></a> 
            </ng-template> 
        </p-column> 
    </div> 
</p-dataTable> 

请您参考如下方法:

PrimeNG DataTable 已弃用，请改用 Table (AKA TurboTable)。 https://www.primefaces.org/primeng-5-2-0-rc1-released-turbotable/

无论如何，您可以访问 Data-Table 中的嵌套对象，如下所示:

<p-table [columns]="cols" [value]="data" ... > 
  ... 
  // Definition of table body 
  <ng-template pTemplate="body" let-rowData let-columns="columns"> 
    <tr [pSelectableRow]="rowData"> 
      <td *ngFor="let col of columns"> 
         <div *ngIf="col.subfield;then nested_object_content else normal_content"></div> 
         <ng-template #nested_object_content> 
           {{rowData[col.field][col.subfield]}} 
         </ng-template> 
         <ng-template #normal_content> 
           {{rowData[col.field]}} 
         </ng-template> 
      </td> 
    </tr> 
  </ngTemplate> 
  ... 
</p-table> 

public data = [ 
{ 
  field1: { 
    subfield1: 'test' 
  }, 
  field2: 'test', 
  field3: 'test', 
  field4: { 
    subfield4: 'test' 
  } 
}] 
 
this.cols = [ 
  { field: 'field1', subfield: 'subfield1'}, 
  { field: 'field2'}, 
  { field: 'field3'}, 
  { field: 'field4', subfield: 'subfield4'}, 
];