在Angular2中显示JSON值

Question

我正在测试在Angular2中编写一个简单的应用程序来显示城市的天气.我创建了一个服务,当用户键入城市并提交表单时,从OpenWeatherMap检索JSON数据.在我的服务中,我有:

getDummyWeather() {
    return {"weather":{"main":"nice and sunny!"}};
}

我将数据存储为weather我的组件中调用的JSON对象.我想我的模板中的调用来获取main的字符串{{weather.weather.main}}然后我得到错误,说明main无法从undefined中检索该值.显然,在我提交表单之前,它是未定义的.当我提交表格时,没有任何反应.所以然后我尝试了{{weather.main}},我没有收到任何错误,但我也没有得到任何数据.如果我将JSON字符串化,我会在表单提交时显示完整的JSON字符串.{{weather}}在表单提交上使用display [Object object].

如何从JSON对象获取数据以在Angular2中的模板中显示？

Answer 1

如果在您提交表单之前天气不可用,那么您不应该尝试显示它,直到您知道它在那里:

<div *ngIf="weather.weather">{{ weather.weather.main }}</div>

如果你真的想显示它,即使weather.weather未定义,那么你可以使用安全导航操作符(也称为Elvis操作符)?.:

{{ weather.weather?.main }}