Question

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

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

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

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

Answer 1

如果在您提交表单之前天气不可用，那么在您知道它之前不应该尝试显示它：

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

如果你真的想要显示它，即使weather.weather未定义，那么你可以使用安全导航操作符（也称为Elvis操作符）?.：

{{ weather.weather?.main }}

在Angular2中显示JSON值

1 个答案: