json - 如何访问 json 列表中的数据以构建 Angular CDK 数据表

Question

我正在使用 Angular Material Design 表构建几个表。我设法从 json 文件中获取数据并填充表。但是 JSON 文件有一些列表 []，我无法从 html 访问这些列表。

这是我的服务中从 JSON 文件获取数据的代码：

getReceiptAll(): Observable<ReceiptAll[]> {
return this.http.get<ReceiptAll[]>(this.serviceUrl)

}

这是组件中的数据源：

export class ReportDataSource extends DataSource<any> {
  constructor(private receiptService: ReceiptService) {
     super();
  }

  connect(): Observable<ReceiptAll[]> {
   return this.receiptService.getReceiptAll();
  }
  disconnect() {}
}

这就是我在 html 文件中构建表格的方式：

<mat-table #table [dataSource]="dataSource">
<!--* ID Column -->
<ng-container matColumnDef="id">
  <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
  <mat-cell *matCellDef="let receipt"> {{receipt.id}} </mat-cell>
</ng-container>
<!--* Period Start Column -->
<ng-container matColumnDef="receipt">
  <mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
  <mat-cell *matCellDef="let receipt"> {{receipt.receipts.receivedDate}} </mat-cell>
</ng-container>

这是 JSON 文件的一部分，您可以看到收据在一个数组中，这就是为什么无法使用 receivedDate 访问的原因

使用 html 文件中的 mat-cell 标记的receipt.receipts.receivedDate。

[

{“companyName”：“Acme”，“documentType”：“标准”，“receipts”：[{“receivedDate”：“2018-04-26T09:05:53.566Z”，

我想这可能是我应该在服务中做的事情，以从数据中访问内容以使其在组件 DataSource 中可用，但我还没有弄清楚是什么。

任何建议表示赞赏。

标签： jsonarraylistangular5angular-cdk