如何在 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 表的问题