Question

我从服务器获得两种不同的数据结构，如下所示

JSON 1：

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

我想在UI中显示data.display属性。

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

如果我按上述方式调用data.display则会抛出错误。如何克服这个

如果JSON中不存在data属性，我想显示空。

我试图在ng-prime网格中使用同样的东西。如果我尝试设置标头和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

您可以使用Elvis（?）运算符：

 <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>

如果JSON

2 个答案: