在primeng的列中显示嵌套对象 [英] Display nested object in column in primeng
问题描述
我正在按照primeng 文档中给出的模板选项在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>这不起作用,因为字段就像 x.y--><!-- 我这里还有一些其他按钮--></ng-模板></p-column>
我怎样才能做到这一点?
共享整个代码 -->
<p-dataTable [globalFilter]="gb" [filterDelay]=1000 [value]="tableData" [alwaysShowPaginator]="true" [rowStyleClass]="setStyle" [rows]="rows" [paginator]="paginator" [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, letodd=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>这不起作用,因为字段就像 x.y--><a *ngIf="col.field === 'ticket'" target="_blank" href={{link}}{{data[col.field]}}><i class="fa fa-外部链接"aria-hidden="true"></i></a></ng-模板></p-column>
</p-dataTable>
PrimeNG DataTable 已弃用,请改用 Table (AKA TurboTable).https://www.primefaces.org/primeng-5-2-0-rc1-released-turbotable/
无论如何,您可以按如下方式访问数据表中的嵌套对象:
<p-table [columns]="cols" [value]="data" ... >...//定义表体<ng-template pTemplate="body" let-rowData let-columns="columns"><tr [pSelectableRow]="rowData"><td *ngFor="let col of columns"><div *ngIf="col.subfield;thennested_object_content else normal_content"></div><ng-template #nested_object_content>{{rowData[col.field][col.subfield]}}</ng-模板><ng-template #normal_content>{{rowData[col.field]}}</ng-模板></td></tr></ngTemplate>...</p-table>
并在您的组件中:
公开数据 = [{字段 1:{子字段1:'测试'},字段2:'测试',字段3:'测试',字段 4:{子字段4:'测试'}}]this.cols = [{字段:'field1',子字段:'subfield1'},{字段:'field2'},{字段:'field3'},{字段:'field4',子字段:'subfield4'},];
希望对你有帮助.:)
I am following the templating option given in primeng docs to create a link with column data alongside in a primeng datatable column, but I am not able to show nested object using {{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>
How can I acheive this?
Sharing entire code -->
<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 is deprecated, use Table (AKA TurboTable) instead. https://www.primefaces.org/primeng-5-2-0-rc1-released-turbotable/
Anyways, you could access nested object inside Data-Table as follows:
<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>
and in your component:
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'},
];
I hope this helps you. :)
这篇关于在primeng的列中显示嵌套对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!