json - 在 Angular2 中显示 JSON 值

Question

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

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

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

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

Answer 1

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

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

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

{{ weather.weather?.main }}