Rufen Sie die Eigenschaft, wenn die Eigenschaft in JSON

Question

Ich erhalte zwei unterschiedliche Struktur von Daten als JSON vom Server wie unten

JSON 1:

{ 
    [{ 
     name : 'sample1', 
     code:'sample code 1', 
     data : { 
        display :'test' 
       } 
     },{ 
     name : 'sample2', 
     code:'sample code 2', 
    } 
    ] 
} 

Ich möchte die data.display Eigenschaft zeigen in Benutzeroberfläche.

<div *ngFor="let item of items" > {{item.data.display}} </div> 

Wenn ich das data.display wie oben aufrufen, löst es einen Fehler aus. Wie das zu überwinden ist

Ich möchte leer zeigen, wenn Daten Eigenschaft nicht in JSON vorhanden ist.

Das gleiche i i in ng-prime grid.If zu verwenden, versuche versuchen die Header und jsonNode zu setzen, tritt Fehler

let headers = [ 
      { jsonNode: "name", displayText: "Name", style: JSON.parse('{"width":"190px"}') }, 
      { jsonNode: "data.display", displayText: "Display name", style: JSON.parse('{"width":"190px"}') } 
     ]; 

Answer 1

Sie Elvis (?) Operator verwenden:

<div *ngFor="let item of items"> {{item.data?.display}} </div> 

Hier ist Plunker dank Gopinath Shiva.

Lösung für Ihre ng-prime grid:

let headers = [ { 
    jsonNode: "name", 
    displayText: "Name", 
    style: JSON.parse('{"width":"190px"}') 
}, { 
    jsonNode: data != undefined ? data.display : '', 
    displayText: "Display", 
    style: JSON.parse('{"width":"190px"}') 
} 
] 

Answer 2

Sie können die Daten in einem <span></span> Element wickeln und verwenden Sie die *ngIf Richtlinie:

<div *ngFor="let item of items"> 
    <span *ngIf="item.data">{{item.data.display}}</span> 
    <span *ngIf="!item.data">item.data is null</span> 
</div>