如何在 Angular 中的 object 中對對象數組進行數據綁定？

Question

試圖讓數據顯示在我的表格中。 我認為我沒有正確地進行數據綁定。

其中一個接口返回一個不同接口的數組，如下所示：

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

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

ExceptionDetailLine接口：

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

如何讓exceptionReportLines顯示在表格中？

這是我沒有運氣的嘗試：

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

以下是在我的 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被異步賦值。 嘗試將表包裝在*ngIf指令中，以在訪問它之前檢查它是否可用。

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

您還可以使用async pipe 並避免將值存儲在變量中。

Answer 2

首先，你應該使用 Observable 而不是 promise 來獲取你的 sessionReportData。

對於你的表，你給 PrimeNG 一個 object 而不是一個數組，你必須給這個表一個數組 object。 此外，您應該使用 PrimeNG 生成的變量，就像您對列所做的那樣

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

如果您不向 p 表提供數組 PrimeNG 不會生成 DOM，這就是為什么即使您嘗試循環報告也不會顯示任何內容的原因。 我認為這更多是關於您使用 PrimeNG 表的問題