Angular 2无法调用嵌套的json

Question

简而言之，如果我打电话

{{ foo.bar | json }}

其中foo是json对象，bar是foo中的json对象，Angular 2会将数据加载到foo.bar中，并显示json对象。如果我尝试foo.bar.baz，则错误

EXCEPTION: TypeError: Cannot read property 'name' of undefined in [
{{ foo.bar.baz | json }}
in BarComponent@1:9]

如何从这个json中提取我需要的数据？

foo.bar对象：

这里是foo.bar的内容：

{ "displayName": null,
"facebookUrl": null, 
"featureCountry": null, 
"id": "some-uuid", 
"name": "Fake Name", 
"permalink": "fake-name", 
"placeIds": [], 
"redemptionProcesses": [ "PAPER_VOUCHER", "DIGITAL_VOUCHER" ], 
"salesforceAccountId": "sfid123",
"websiteUrl": "http://fake.com"
}

具体来说，我试图提取姓名＆amp; websiteUrl。

我还有另一个类似的设置，除了它是一个json数组我用ngFor迭代。这很好。

Answer 1

很可能，您的模板在http.get()请求返回并填充数据之前尝试呈现数据。使用Elvis operator, ?.（请参阅@ Eric的评论），或使用NgIf：

<div *ngIf="yourObject">
     {{yourObject.name}}
</div>

NgFor可能有效，因为该数组最初是空的，不会产生错误，因为在数据从服务器返回之前没有任何内容可以循环。