我正在使用Angular Material Design表构建几个表 . 我已经设法从json文件中获取数据填充表 . 但是JSON文件有一些list [],我无法从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文件的一部分,因为您可以看到收据在数组中,这就是为什么无法使用getDate访问

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

[

{“companyName”:“Acme”,“documentType”:“标准”,“收据”:[{“receivedDate”:“2018-04-26T09:05:53.566Z”,

我想这可能是我应该在服务中从数据中访问内容以使其在组件DataSource中可用的东西,但我还没弄清楚是什么 .

任何建议表示赞赏 .