Как решить Angular [объект объекта] в шаблоне

Question

Я получаю [объект объекта], показанный на моей HTML-странице.

Я звоню в веб-сервис и в моем console.log. Я вижу полный ответ, но в своем шаблоне я вижу только [объект]

test() {

 this.http.post('api...', JSON.stringify(this.getAllCaseInfoWithCAS)).subscribe(data => {  
  this.testData = [data];
 });

}

У меня есть ngFor

<ng-template ngbPanelContent>
 <div class="row" *ngFor="let item of testData">  
   {{item.getAllCaseInfoWithCASReturn.caseDetails}}
 </div>
</ng-template>

Ответ выглядит следующим образом

{
    "getAllCaseInfoWithCASReturn": {
        "caseDetails": {
            "caseNumber": "12345",
            "componentDetails": {
                "component": "29"
            },
            "personNumber": "5",
            "month": "7"
        }
    }
}

Как отобразить всю информацию в шаблоне?

Answer 1

Лучше начать с форматирования JSON в виде массива caseDetails, вот примерный код того, что вы можете сделать с текущим JSON:

// This should be refactored to a service file.
getCaseDetails(data: any): Observable<any[]> {
    const url = `api/url`;
    return this.httpClient.post(url, data)
        .pipe(
            map(result => result['getAllCaseInfoWithCASReturn']['caseDetails']),
            tap(caseDetail => console.log(caseDetail))
        )
}

test() {
    this.getCaseDetails(dummyData).subscribe(caseDetail => {
        this.testData = caseDetail;
    })
}

---

<ng-template ngbPanelContent>
 <div class="row">  
   {{testData?.caseNumber}} <!-- or json pipe -->
   {{testData?.personNumber}}
   {{testData?.month}}
   {{testData?.componentDetails?.component}}
 </div>
</ng-template>

Answer 2

Вы можете использовать JsonPipe

{{ value_expression | json }}

Преобразует значение в его представление в формате JSON. Полезно для отладки.

{{ item.getAllCaseInfoWithCASReturn.caseDetails | json }}