Как получить доступ к данным из списка json для построения таблицы данных Angular CDK - PullRequest
Новая
       24

Как получить доступ к данным из списка json для построения таблицы данных Angular CDK

0 голосов
/ 30 апреля 2018

Я строю пару таблиц, используя таблицы 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, поскольку вы можете видеть, что квитанции находятся в массиве, и поэтому невозможно получить доступ к ReceiveDate, используя

receive.receipts.receivedDate с использованием тега mat-cell в html-файле. 

[

{ "companyName": "Acme", "documentType": "Стандарт", «квитанции»: [ { "receiveDate": "2018-04-26T09: 05: 53.566Z",

Полагаю, в сервисе мне нужно было бы что-то сделать, чтобы получить доступ к контенту из данных, чтобы сделать его доступным в компоненте DataSource, но я не понял, что именно.

Любые предложения приветствуются.

...