如何在Angular中的对象中数据绑定对象数组？答案

【问题标题】：How to databind an array of objects within an object in Angular?如何在Angular中的对象中数据绑定对象数组？
【发布时间】：2020-09-29 03:09:32
【问题描述】：

试图让数据显示在我的表格中。我认为我没有正确地进行数据绑定。

其中一个接口返回一个不同接口的数组，如下所示：

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)

        });
  }

【问题讨论】：

您使用 Promise 而不是 observables 有什么特别的原因吗？因为我认为当组件模板被渲染时你的承诺还没有解决。

标签： html angular typescript data-binding

【解决方案1】：

this.sessionReportData 被异步赋值。尝试将表包装在 *ngIf 指令中，以在访问之前检查它是否可用。

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

您也可以使用async 管道并避免将值存储在变量中。

【讨论】：

【解决方案2】：

首先，你应该使用 Observable 而不是 Promise 来获取你的 sessionReportData。

对于你的表格，你给 PrimeNG 一个对象而不是一个数组，你必须给表格一个数组对象。此外，您应该像在列中一样使用 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-table 提供数组 PrimeNG 不会生成 DOM，这就是为什么即使您尝试循环查看报告也不会显示任何内容的原因。我认为这更多的是关于您使用 PrimeNG 表的问题

【讨论】：