1

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 ファイルの一部です。領収書が配列になっていることがわかります。

html ファイル内の mat-cell タグを使用して、receipt.receipts.receivedDate を取得します。

[

{ "companyName": "Acme", "documentType": "Standard", "receipts": [ { "receivedDate": "2018-04-26T09:05:53.566Z",

データからコンテンツにアクセスしてコンポーネント DataSource で使用できるようにするために、サービスで行う必要があると思いますが、何を理解していません。

任意の提案をいただければ幸いです。

4

0 に答える 0