Связывание и использование полей объекта в объекте, возвращаемом серверным API с таблицей данных PrimeNG - PullRequest
Новая
       10

Связывание и использование полей объекта в объекте, возвращаемом серверным API с таблицей данных PrimeNG

0 голосов
/ 22 ноября 2018

Добрый день

В настоящее время я возвращаю массив объектов, выглядящих следующим образом: 

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

Требуется, чтобы я мог отображать таблицу данных PrimeNG с использованием TypeScript, напримерниже: 

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>

Это, однако, отображает только столбцы, имеющие прямую привязку данных.Кажется, я не могу заставить таблицу подобрать свойства вложенных объектов.

Возможно ли вышеупомянутое в настоящее время с PrimeNG или мне нужно создать пользовательский DTO на сервере, возвращающем только 'прямые' поля для PrimeNGтаблица

1 Ответ

0 голосов
/ 23 ноября 2018

Не удалось заставить это работать с таблицей 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>
...