How to databind an array of objects within an object in Angular?

Question

Trying to get data to show up in my table. I don't think I'm doing the data binding correctly.

One of the interfaces returns an array of a different interface like so:

import { ExceptionDetailLine } from './exception-detail-line-interface';

export interface ExceptionReportData {
  exceptionReportTitle: string,
  exceptionReportLines: Array<ExceptionDetailLine>
}

ExceptionDetailLine interface:

export interface ExceptionDetailLine {
  itemId: string,
  altItemId: string,
  genName: string,
  stationName: string,
  hospitalCode: string,
  facility: string,
  reason: string
}

How do I get exceptionReportLines to display in the table?

Here is how I am trying with no luck:

<p-table class="table table-striped"
             [columns]="cols"
             [value]="sessionReportData"
             [paginator]="true"
             sortMode="multiple"
             sortField="station"
             [rows]="10"
             [totalRecords]="totalCases"
             [rowsPerPageOptions]="[10, 25, 50]"
             [showCurrentPageReport]="true"
             [responsive]="true"
             [resizableColumns]="true">
      <ng-template pTemplate="header" let-columns>
        <ng-template pTemplate="colgroup" let-columns>
          <colgroup>
            <col *ngFor="let col of columns">
          </colgroup>
        </ng-template>
        <tr>
          <th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.field">
            {{ col.header }}
            <p-sortIcon [field]="col.header"></p-sortIcon>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body">
        <tr *ngFor="let s of sessionReportData.exceptionReportLines">
          <td>{{ s.itemId }}</td>
          <td>{{ s.altItemId }}</td>
          <td>{{ s.genName }}</td>
          <td>{{ s.stationName }}</td>
          <td>{{ s.hospitalCode }}</td>
          <td>{{ s.facility }}</td>
          <td>{{ s.reason }}</td>
        </tr>
      </ng-template>

Here is how the data is retrieved in my component.ts:

public async orderExceptionReportData(): Promise<void> {
    return this.orderExceptionReportService.OrderExceptionReport(this.sessionReportFilter)
      .then(
        data => {
          this.sessionReportData = data;
          console.log(this.sessionReportData)

        });
  }

Answer 1

this.sessionReportData is assigned values asynchronously. Try to wrap the table in a *ngIf directive to check if it's available before accessing it.

<ng-container *ngIf="sessionReportData">
  <p-table>
    ...
  </p-table>
</ng-container>

You could also use async pipe and avoid storing the values in a variable.

Answer 2

First of all, you should use Observable instead of promise to get your sessionReportData.

For your table, you give to PrimeNG an object instead of an array, you must give to the table an array object. Moreover, you should use the variable generate by PrimeNG as you did for your columns

<p-table class="table table-striped"
             [columns]="cols"
             [value]="sessionReportData?.exceptionReportLines">
...
  <ng-template pTemplate="body" let-exceptionReportLine>
        <tr>
          <td>{{ exceptionReportLine.itemId }}</td>
          <td>{{ exceptionReportLine.altItemId }}</td>
          <td>{{ exceptionReportLine.genName }}</td>
          <td>{{ exceptionReportLine.stationName }}</td>
          <td>{{ exceptionReportLine.hospitalCode }}</td>
          <td>{{ exceptionReportLine.facility }}</td>
          <td>{{ exceptionReportLine.reason }}</td>
        </tr>
  </ng-template>
<p-table>

If you don't give an Array to the p-table PrimeNG doesn't generate DOM, it's why nothing is display even if you try to loop on your reports. I think it's more an issue about your use of PrimeNG table