在 Angular2 中显示 JSON 值答案

【问题标题】：Displaying JSON values in Angular2在 Angular2 中显示 JSON 值
【发布时间】：2016-03-10 15:30:36
【问题描述】：

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

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

我将数据存储为我的组件中名为weather 的 JSON 对象。我认为在我的模板中获取主字符串的调用将是{{weather.weather.main}}，但随后我收到错误消息，指出无法从未定义中检索值main。显然，在我提交表单之前它是未定义的。当我提交表单时，什么也没有发生。然后我尝试了{{weather.main}}，我没有收到任何错误，但我也没有得到任何数据。如果我对 JSON 进行字符串化，我会在表单提交时显示完整的 JSON 字符串。使用{{weather}} 在表单提交时显示[Object object]。

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

【问题讨论】：

[Object, object] 在 angular2 尝试插入对象时显示。通过 JSON.stringify() 运行变量以将 json 对象转换为字符串。然后尝试将该值插入到视图中。这应该可以帮助您调试视图中实际发生的情况。
问题在于嵌套的 json 对象。我现在可以使用{{weather.weather}} 从像{"weather":"Nice and sunny"} 这样的JSON 中获取值。由于嵌套，我无法从上述问题中的示例 JSON 中获取 JSON。
万一谷歌在搜索调试json变量时会跳转到这个站点。 {{variable | json}} 就是答案

标签： json angular

【解决方案1】：

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

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

如果你真的想在weather.weather未定义的情况下显示它，那么你可以使用安全导航运算符（也称为猫王运算符）?.：

{{ weather.weather?.main }}

【讨论】：