角9显示来自嵌套json的数据，从rest中获取。

Question

我想知道如何显示从REST获取的嵌套json数据中的某些属性。

它只显示为对象。但是，我希望访问和显示存储在条目->资源中的属性。

我真的不知道问题出在哪里.在组件和接口之间。即使我在我的html (如{{observation.entry.resource}} )上进行了扩展性的编写，它也不起作用.

非常感谢您提前！

1. my服务代码

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { Observation } from '../../models/observation';
import { DataSource } from '@angular/cdk/table';

@Injectable({
  providedIn: 'root'
})
export class CovidService {

  private covidApi:string = "http://hapi.fhir.org/baseR4/Observation?code=94531-1";
  
  constructor(private httpClient: HttpClient) { }

  getData():Observable<Observation[]>{  
    return this.httpClient.get<Observation[]>(this.covidApi);
    
  }
}

1. my组件代码

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { CovidService } from '../../services/covid/covid.service';
import { Observation } from '../../models/observation';
import { Observable } from 'rxjs';
import {map} from 'rxjs/operators';

import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';




@Component({
  selector: 'app-covid-status',
  templateUrl: './covid-status.component.html',
  styleUrls: ['./covid-status.component.css']
})


export class CovidStatusComponent implements OnInit { 
   observations: Observation[];
   displayedColumns: string[] = ['id', 'entry','meta','status','subject'];
  
  constructor(private covidService: CovidService) {
  }

 
  ngOnInit(): void {
       this.getData();
  }  

  getData(){
    this.covidService.getData().subscribe(data=> {this.observations = data;});
    }
  

}

1. my html

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <p>{{observations}}</p>
    </div>
</div>

1. 数据接口

export interface Observation {
    entry: Entry[];
  }
  
export interface Entry {
    fullUrl: string;
    resource: Resource;
    search: Search;
  }
  
export interface Search {
    mode: string;
  }
  
export interface Resource {
    resourceType: string;
    id: string;
    meta: Meta2;
    status: string;
    category: Category[];
    code: Code;
    subject: Subject;
    encounter: Subject;
    effectiveDateTime: string;
    issued: string;
    valueCodeableConcept: Code;
  }
  
export interface Subject {
    reference: string;
  }
  
export interface Code {
    coding: Coding[];
    text: string;
  }
  
export interface Category {
    coding: Coding[];
  }
  
export interface Coding {
    system: string;
    code: string;
    display: string;
  }
  
export interface Meta2 {
    versionId: string;
    lastUpdated: string;
    source: string;
    profile: string[];
    tag: Tag[];
  }
  
export interface Tag {
    system: string;
    code: string;
  }
  
export interface Link {
    relation: string;
    url: string;
  }
  
export interface Meta {
    lastUpdated: string;
  }

1. 嵌套json

{
    "resourceType": "Bundle",
    "id": "e64c9372-aa3c-4e58-8d9a-af0ef210707a",
    "meta": {
        "lastUpdated": "2020-10-01T15:31:00.321+00:00"
    },
    "type": "searchset",
    "total": 157,
    "link": [
        {
            "relation": "self",
            "url": "http://hapi.fhir.org/baseR4/Observation?code=94531-1"
        },
        {
            "relation": "next",
            "url": "http://hapi.fhir.org/baseR4?_getpages=e64c9372-aa3c-4e58-8d9a-af0ef210707a&_getpagesoffset=20&_count=20&_pretty=true&_bundletype=searchset"
        }
    ],
    "entry": [
        {
            "fullUrl": "http://hapi.fhir.org/baseR4/Observation/c6100c54-94b6-4ed8-8400-6e990c679ed4",
            "resource": {
                "resourceType": "Observation",
                "id": "c6100c54-94b6-4ed8-8400-6e990c679ed4",
                "meta": {
                    "versionId": "1",
                    "lastUpdated": "2020-03-24T17:53:09.595+00:00",
                    "source": "#wP11dHjLGlZ6MwzU",
                    "profile": [
                        "http://hl7.org/fhir/us/core/StructureDefinition/us-core-observation-lab"
                    ],
                    "tag": [
                        {
                            "system": "https://smarthealthit.org/tags",
                            "code": "Covid19 synthetic population from Synthea"
                        }
                    ]
                },
                "status": "final",
                "category": [
                    {
                        "coding": [
                            {
                                "system": "http://terminology.hl7.org/CodeSystem/observation-category",
                                "code": "laboratory",
                                "display": "laboratory"
                            }
                        ]
                    }
                ],
                "code": {
                    "coding": [
                        {
                            "system": "http://loinc.org",
                            "code": "94531-1",
                            "display": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                        }
                    ],
                    "text": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                },
                "subject": {
                    "reference": "Patient/1b0580b9-1ee3-4353-b555-64c797d57564"
                },
                "encounter": {
                    "reference": "Encounter/135aee2a-f9d4-4627-ba9d-659ba067171d"
                },
                "effectiveDateTime": "2020-03-19T00:33:14-05:00",
                "issued": "2020-03-19T00:33:14.678-05:00",
                "valueCodeableConcept": {
                    "coding": [
                        {
                            "system": "http://snomed.info/sct",
                            "code": "10828004",
                            "display": "Positive (qualifier value)"
                        }
                    ],
                    "text": "Positive (qualifier value)"
                }
            },
            "search": {
                "mode": "match"
            }
        },
        {
            "fullUrl": "http://hapi.fhir.org/baseR4/Observation/41149276-9f25-4613-989a-0a58e3c95d92",
            "resource": {
                "resourceType": "Observation",
                "id": "41149276-9f25-4613-989a-0a58e3c95d92",
                "meta": {
                    "versionId": "1",
                    "lastUpdated": "2020-03-24T18:00:19.621+00:00",
                    "source": "#wjBsr5FxmhpDPleG",
                    "profile": [
                        "http://hl7.org/fhir/us/core/StructureDefinition/us-core-observation-lab"
                    ],
                    "tag": [
                        {
                            "system": "https://smarthealthit.org/tags",
                            "code": "Covid19 synthetic population from Synthea"
                        }
                    ]
                },
                "status": "final",
                "category": [
                    {
                        "coding": [
                            {
                                "system": "http://terminology.hl7.org/CodeSystem/observation-category",
                                "code": "laboratory",
                                "display": "laboratory"
                            }
                        ]
                    }
                ],
                "code": {
                    "coding": [
                        {
                            "system": "http://loinc.org",
                            "code": "94531-1",
                            "display": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                        }
                    ],
                    "text": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                },
                "subject": {
                    "reference": "Patient/0c4a1143-8d1c-42ed-b509-eac97d77c9b2"
                },
                "encounter": {
                    "reference": "Encounter/18f34edf-875f-4c77-ad6d-5062a516f4c1"
                },
                "effectiveDateTime": "2020-01-14T11:52:35-06:00",
                "issued": "2020-01-14T11:52:35.648-06:00",
                "valueCodeableConcept": {
                    "coding": [
                        {
                            "system": "http://snomed.info/sct",
                            "code": "10828004",
                            "display": "Positive (qualifier value)"
                        }
                    ],
                    "text": "Positive (qualifier value)"
                }
            },
            "search": {
                "mode": "match"
            }
        },
        {
            "fullUrl": "http://hapi.fhir.org/baseR4/Observation/ae8d76ec-249e-45ac-a9fd-0e632ea492c9",
            "resource": {
                "resourceType": "Observation",
                "id": "ae8d76ec-249e-45ac-a9fd-0e632ea492c9",
                "meta": {
                    "versionId": "1",
                    "lastUpdated": "2020-03-24T18:05:48.309+00:00",
                    "source": "#XWpckBrCJJ9e7CXB",
                    "profile": [
                        "http://hl7.org/fhir/us/core/StructureDefinition/us-core-observation-lab"
                    ],
                    "tag": [
                        {
                            "system": "https://smarthealthit.org/tags",
                            "code": "Covid19 synthetic population from Synthea"
                        }
                    ]
                },
                "status": "final",
                "category": [
                    {
                        "coding": [
                            {
                                "system": "http://terminology.hl7.org/CodeSystem/observation-category",
                                "code": "laboratory",
                                "display": "laboratory"
                            }
                        ]
                    }
                ],
                "code": {
                    "coding": [
                        {
                            "system": "http://loinc.org",
                            "code": "94531-1",
                            "display": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                        }
                    ],
                    "text": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                },
                "subject": {
                    "reference": "Patient/40c6abbe-96bb-4202-bed3-ddb9d8f68cb9"
                },
                "encounter": {
                    "reference": "Encounter/fa321fea-4d1d-485e-8c8b-4341255465b0"
                },
                "effectiveDateTime": "2020-01-11T21:00:42-06:00",
                "issued": "2020-01-11T21:00:42.718-06:00",
                "valueCodeableConcept": {
                    "coding": [
                        {
                            "system": "http://snomed.info/sct",
                            "code": "10828004",
                            "display": "Positive (qualifier value)"
                        }
                    ],
                    "text": "Positive (qualifier value)"
                }
            },
            "search": {
                "mode": "match"
            }
        },
        {
            "fullUrl": "http://hapi.fhir.org/baseR4/Observation/2d71d059-984b-4b13-b8b7-e9de2ee94f27",
            "resource": {
                "resourceType": "Observation",
                "id": "2d71d059-984b-4b13-b8b7-e9de2ee94f27",
                "meta": {
                    "versionId": "1",
                    "lastUpdated": "2020-03-24T18:08:38.202+00:00",
                    "source": "#zJ6AANWUU0Zx9Zjs",
                    "profile": [
                        "http://hl7.org/fhir/us/core/StructureDefinition/us-core-observation-lab"
                    ],
                    "tag": [
                        {
                            "system": "https://smarthealthit.org/tags",
                            "code": "Covid19 synthetic population from Synthea"
                        }
                    ]
                },
                "status": "final",
                "category": [
                    {
                        "coding": [
                            {
                                "system": "http://terminology.hl7.org/CodeSystem/observation-category",
                                "code": "laboratory",
                                "display": "laboratory"
                            }
                        ]
                    }
                ],
                "code": {
                    "coding": [
                        {
                            "system": "http://loinc.org",
                            "code": "94531-1",
                            "display": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                        }
                    ],
                    "text": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                },
                "subject": {
                    "reference": "Patient/e5c6bf5f-772f-4fee-8d72-4d05bca3027d"
                },
                "encounter": {
                    "reference": "Encounter/eb0a6461-9103-409e-8773-0d13b827d32f"
                },
                "effectiveDateTime": "2020-03-11T10:56:41-05:00",
                "issued": "2020-03-11T10:56:41.928-05:00",
                "valueCodeableConcept": {
                    "coding": [
                        {
                            "system": "http://snomed.info/sct",
                            "code": "10828004",
                            "display": "Positive (qualifier value)"
                        }
                    ],
                    "text": "Positive (qualifier value)"
                }
            },
            "search": {
                "mode": "match"
            }
        },

Answer 1

1. API返回一个包含Entry项列表的Observation，而不是
2. 使用map从Observation转换为Entry项<Observation>H 210G 211的列表的列表。

export class CovidStatusComponent implements OnInit { 
   entries: Entry[];
   displayedColumns: string[] = ['id', 'entry','meta','status','subject'];
  
  constructor(private covidService: CovidService) {
  }

  ngOnInit(): void {
       this.getData();
  }  

  getData(){
    this.covidService.getData().subscribe(data=> {this.entries = data.map(d => d.entry);});
    }
}

另外：

{{observation.entry.resource}}不能工作，因为entry是一个数组。

使用{{observation.entry[0].resource}}代替。

Answer 2

使用角插值( {{观测}}语法)，您只能显示字符串。

扩展解

为了完成这项工作，您必须提供对象的一个属性。例如：

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <p>{{observations.id}}</p>
        <p>{{observations.meta}}</p>
    </div>
</div>

但这些：

1. <p>{{observations.entry}}</p>
2. <p>{{observations.entry.fullUrl}}</p>

因为"entry“是一个包含许多对象的数组，所以两者都不能工作。所以你可以这样做：

<p>{{observations.entry[0].fullUrl}}</p>

肯定会成功的。它从"entry“数组中获取第一个对象。如果要显示所有条目，则必须对其进行迭代。试试这个：

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <p>{{observations.id}}</p>
        <p *ngFor="let e of observations.entry">{{ e.fullUrl }}</p>
    </div>
</div>

这将为条目数组中的每个对象显示"fullUrl“的值。如果您有多个“观察”(如您的变量名)，那么让我们假设您必须像下面这样迭代它们：

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <div *ngFor="let observation of observations">
            <p>{{observations.id}}</p>
            <p *ngFor="let e of observation.entry">{{ e.fullUrl }}</p>
        </div>
    </div>
</div>

快速解

如果您想要一个快速而肮脏的解决方案，只需查看结果，就可以使用"json“管道：

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <p>{{ observations | json }}</p>
    </div>
</div>

Answer 3

您的数据是一个数组观测: Observation[]；因此，如果您想显示所有数据，请使用*ngFor

<table>
  <tr>
    <th>FullUrl </th>
    <th>Search Mode</th>
    <th>resource Id</th>
  </tr>
  <tr *ngFor="let item of observation.entry">
    <td>{{ item.fullUrl }}</td>
    <td>{{ item.search.mode}}</td>
    <td>{{item.resource.id </td>
  </tr>
 </table>

如果sub也是数组，则可以使用子循环*ngFor，如item.resource.category

<table>
  <tr>
    <th>FullUrl </th>
    <th>Search Mode</th>
    <th>resource Id</th>
    <th> resource category</th>
  </tr>
  <tr *ngFor="let item of observation.entry">
    <td>{{ item.fullUrl }}</td>
    <td>{{ item.search.mode}}</td>
    <td>{{item.resource.id </td> 
<td>
<span *ngFor="let cat of item.resource.category">
{{cat.coding.display}}
      </span> </td>
  </tr>
</table>

如果数据是数组，那么可以使用*ngFor或数组item.resource.category的索引。场..。