[英]Binding and using an object's fields within an object returned by the server API with a PrimeNG data table
Good day 美好的一天
Currently I am returning an array of objects looking like: 目前,我正在返回一个对象数组,如下所示:
{
attendeeCount: 5
bookDay: "2018-11-22T14:06:24.120Z"
bookingComment: "This is a test"
conferenceRoom: {id: 8, name: "Main Boardroom", seatingCount: 10, location: "Site Office", projector: "YES"}
employee: {id: 111, title: "Mr.", initials: "J", preferredName: "John", lastName: "Smith", …}
id: 1
refreshment: {id: 1, name: "Coffee, Tea and Water"}
timeSlot: "07:00 - 07:30"
}
The requirement then is that I should be able to render the PrimeNG data table using TypeScript like the below: 然后,要求是我应该能够使用TypeScript渲染PrimeNG数据表,如下所示:
public getRoomRosterTable() {
this.conferenceRoomBookingService.getRoomRoster(this.dateValue, this.selectedConferenceRoom.id).subscribe(response => {
console.warn(response);
this.conferenceRoomBookings = response;
}, error1 => {
this.alertService.error(error1);
});
this.timeSlotCols = [
{field: 'timeSlot', header: 'Time Slot'},
{field: 'employee.preferredName' + 'employee.lastName', header: 'Slot Booked By'},
{field: 'attendeeCount', header: 'Attendee Count'},
{field: 'refreshment.name', header: 'Refreshment Details'},
{field: 'bookingComment', header: 'Booking Comment'}
];
}
Combined with html looking like: 结合html看起来像:
<p-table [value]="conferenceRoomBookings" [reorderableColumns]="true" [columns]="timeSlotCols">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
<div style="text-align:center">
{{col.header}}
</div>
</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>
This however only renders the columns that have direct data bound. 但是,这仅呈现具有直接数据绑定的列。 I cannot seem to get the table to pick up properties of nested objects.
我似乎无法让表格拾取嵌套对象的属性。
Is the above possible currently with PrimeNG, or do I need to create a custom DTO on the server returning only 'direct' fields for the PrimeNG table? PrimeNG当前是否可以使用上述方法,还是我需要在服务器上创建一个自定义DTO,仅返回PrimeNG表的“直接”字段?
Could not get this to work with the PrimeNG table and resorted to using *ngFor combined with *ngIf wrapped in divs to detect nulls: 无法将其与PrimeNG表配合使用,只能将* ngFor与* ngIf结合使用,将它们包装在div中以检测空值:
<table class="table-bordered">
<thead>
<tr>
<th>
<div style="align-content: center">
Time Slot
</div>
</th>
<th>
<div style="align-content: center">
Booked By
</div>
</th>
<th>
<div style="align-content: center">
Attendee Count
</div>
</th>
<th>
<div style="align-content: center">
Refreshment Requirement
</div>
</th>
<th>
<div style="align-content: center">
Booking Details
</div>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let conferenceRoomBooking of conferenceRoomBookings">
<td>
<div *ngIf="conferenceRoomBooking.timeSlot">
{{conferenceRoomBooking.timeSlot}}
</div>
</td>
<td>
<div *ngIf="conferenceRoomBooking.employee">
{{conferenceRoomBooking.employee.preferredName}} {{conferenceRoomBooking.employee.lastName}}
</div>
</td>
<td>
<div *ngIf="conferenceRoomBooking.attendeeCount">
{{conferenceRoomBooking.attendeeCount}}
</div>
</td>
<td>
<div *ngIf="conferenceRoomBooking.refreshment">
{{conferenceRoomBooking.refreshment.name}}
</div>
</td>
<td>
<div *ngIf="conferenceRoomBooking.bookingComment">
{{conferenceRoomBooking.bookingComment}}
</div>
</td>
</tr>
</tbody>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.