gpt4 book ai didi

javascript - 在primeng的列中显示嵌套对象

转载 作者:行者123 更新时间:2023-12-04 16:25:29 25 4
gpt4 key购买 nike

我正在按照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'},
];

我希望这可以帮助你。 :)

关于javascript - 在primeng的列中显示嵌套对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48145549/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com