在服务器 API 与 PrimeNG 数据 table 返回的对象中绑定和使用对象的字段

Question

美好的一天

目前我返回的对象数组如下所示：

{
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"
}

然后要求我应该能够使用 TypeScript 呈现 PrimeNG 数据 table，如下所示：

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'}
    ];
}

结合 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>

然而，这只会呈现具有直接数据绑定的列。我似乎无法让 table 获取嵌套对象的属性。

目前 PrimeNG 是否可以实现上述功能，或者我是否需要在服务器上创建自定义 DTO，仅返回 PrimeNG table 的 'direct' 字段？

Answer 1

无法让它与 PrimeNG 一起使用 table 并求助于使用 *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>

在服务器 API 与 PrimeNG 数据 table 返回的对象中绑定和使用对象的字段

Binding and using an object's fields within an object returned by the server API with a PrimeNG data table

javascript

datatable

typescript

primeng

primeng-datatable