使用 Angular 在 JSON 调用中显示嵌套对象时遇到问题

Question

免责声明：我是 Angular 的新手 :-)

我正在尝试将 Angular 和天气 api 交织在一起，我对如何在 JSON 有效负载（即历史对象下的项目）中显示嵌套数据感到困惑。 我能够在有效负载中调用和显示顶级项目。

这是我所在的位置：

{{ this.weatherData?.current.precip }} <-- this shows the current precipitation successfully
{{ this.weatherData?.historical.maxtemp }} <--- this doesn't display anything

我的 API 网址： https : //api.weatherstack.com/historical? access_key = 000000hidden0000000 & historical_date = 2019-08-30 & query =london

API 文档： https : //weatherstack.com/documentation

控制台屏幕截图：

非常感谢您对好奇的新手的指导和耐心。

Answer 1

历史数据按日期返回，因此您必须这样做才能显示单个日期：

{{ this.weatherData?.historical['2018-08-30'].maxtemp }}

或者循环显示所有日期：

<div *ngFor="let history of this.weatherData?.historical | keyvalue">
  {{ history.key + ': ' + history.value.maxtemp }}
</div>

Answer 2

this.weatherData?.historical是一个键为日期的数组。 如果您确定this.weatherData?.historical数组中只有 1 个值，您应该可以像下面这样访问它：

this.weatherData?.historical[0].maxtemp