Json 数组找不到不同的支持对象

Question

我正在尝试使用 ionic 4 获取 wunderground api 的天气数据 json。当我尝试运行这段代码时，我遇到了错误 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

简短 json 响应

{
  "hourly_forecast": [
    {
      "condition": "غائم جزئياً",
      "icon": "partlycloudy",
      "icon_url": "http://icons.wxug.com/i/c/k/partlycloudy.gif",
      "fctcode": "2",
      "sky": "30"
    }
  ]
}

代码

weather : any 

constructor(private https: HttpClient) {


  this.https.get('xxxxxxxxxxxx/q/muscat.json')
  .subscribe(data => {

    this.weather= data
    console.log(this.weather)

  })

}

html

   <tr  *ngFor="let item of weather">

        <td>{{item.hourly_forecast.condition}}</td>
      </tr>

有什么想法吗？

Answer 1

 <tr  *ngFor="let item of weather.hourly_forecast.condition">
    <td>{{item}}</td>
 </tr>

这个行得通

Answer 2

您的数据是对象，不是数组。数组包装在对象的 .hourly_forecast 字段中：

<tr *ngFor="let item of weather?.hourly_forecast">
    <td>{{item.condition}}</td>
</tr>

确保添加 ? 以免在数据到达之前出现错误。

Answer 3

NgFor 只能用在数组上。尝试这样的事情：

*ngFor="let item of weather.hourly_forecast" and <td>{{item.condition}}</td>

Answer 4

这是有效的示例代码！

var json = {
  "hourly_forecast": [{
      "condition": "غائم جزئياً",
      "icon": "partlycloudy",
      "icon_url": "http://icons.wxug.com/i/c/k/partlycloudy.gif",
      "fctcode": "2",
      "sky": "30"
    },
    {
      "condition": "غائم جزئياً",
      "icon": "partlycloudy",
      "icon_url": "http://icons.wxug.com/i/c/k/partlycloudy.gif",
      "fctcode": "2",
      "sky": "30"
    }
  ],
  "hourly_forecast2": [{
    "condition": "غائم جزئياً",
    "icon": "partlycloudy",
    "icon_url": "http://icons.wxug.com/i/c/k/partlycloudy.gif",
    "fctcode": "2",
    "sky": "30"
  }]
}

// If you want iterate inside

for (var element in json) {
  var data = json[element];
  for (var val in data) {
    console.log(data[val].condition)
  }
}

或者检查数据是否导入正确

this.https.get('xxxxxxxxxxxx/q/muscat.json')
 .subscribe(data => {
this.weather = data.hourly_forecast;
 });

现在可以使用了

<tr  *ngFor="let item of weather">
    <td>{{item.hourly_forecast.condition}}</td>
  </tr>

Json 数组找不到不同的支持对象

Json Array Cannot find a differ supporting object

angular

ionic4