Позвоните свойство, если свойство присутствует в JSON

Question

Я получаю две разные структуры данных в формате JSON от сервера, как показано ниже

JSON 1:

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

Я хочу показать свойство data.display в UI.

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

если я называю data.display, как указано выше, это вызывает ошибку. Как преодолеть это

Я хочу показать пустое, если свойство данных отсутствует в JSON.

То же самое я пытаюсь использовать в нг-премьер grid.If я пытаюсь установить заголовки и jsonNode, происходит ошибка

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

Answer 1

Вы можете использовать Элвис (?) оператор:

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

Вот Plunker благодаря Gopinath Shiva.

Решение для 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

Вы можете обернуть данные в <span></span> элементе и использовать *ngIf директиву:

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