Htykuut

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:

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:

<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?

Could not get this to work with the PrimeNG table and resorted to using *ngFor combined with *ngIf wrapped in divs to detect nulls:

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