角度：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等可迭代对象

Question

大家好，我正在尝试使用openWeb API来获取一些数据， 我可以通过控制台显示数据，但是我很难显示数据。

错误错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

App.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'want-end';
    Data ;
    datas ;

  constructor(private http: HttpClient) {  }

  weatherAPi = 'http://api.openweathermap.org/data/2.5/weather?q=london&appid=6cb36b639ee172ba6bc892bec0636b76'

    getWeather = () => {
      this.Data= this.http.get(this.weatherAPi).subscribe( data =>  {
        this.Data = data;
       console.log(this.Data)
     })
    }


   ngOnInit(){
    this.getWeather()
   }
}

app.component.html

     <button (click)="getWeather()">clcik me</button>
  <h2 *ngFor="let data of Data ">{{ data}}</h2>



[data showing up in console][1]


  [1]: https://i.stack.imgur.com/cQpzS.png

Answer 1

这是因为您从Weather API得到的响应是object而不是Array。因此，它是不可迭代的。

已更新

您尝试遍历在Angular中不可行的对象。

您可以做两件事：

1。使用KeyValuePairPipe显示键值列表。这是我的favorite explanation之一，关于它们如何工作以及如何构建它们。

在您的模板中

<button (click)="getWeather()">clcik me</button>
<h2 *ngFor="let data of Data | keyvalue">{{data.key}}: {{data.value}}</h2>

请注意，此方法将仅显示与键关联的值。表示数组将显示为[...]

2。使用interpolation仅显示您可能想要显示的信息。

您可以在模板中编写

<button (click)="getWeather()">clcik me</button>
<h2>Current temperature: {{Data.main.temp}}</h2>
<h2>Wind speed: {{Data.wind.speed}}</h2>

要真正使您玩起来，请处理Observable至async pipe。 -https://angular.io/api/common/AsyncPipe -https://malcoded.com/posts/angular-async-pipe/

编辑

为了完成这项工作，这里是an example of what could be implemented。

以下是您可能感兴趣的一些链接：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

Answer 2

您应该遍历weather数组，此外，也许最好将可迭代的数据放入<p>标记中并使用：

<button (click)="getWeather()">click me</button>
<ng-container *ngIf="Data && Data.weather && Data.weather.length > 0">
   <p *ngFor="let data of Data.weather">
      {{data}}
   </p>
</ng-container>

更新：

您似乎具有以下结构

demo = {
    'key1': [{'key11':'value11'}, {'key12':'value12'}],
    'key2': [{'key21':'value21'}, {'key22':'value22'}],
  }

如果是这样，请尝试使用keyvalue管道来帮助您遍历对象：

<button (click)="getWeather()">click me</button>
<ng-container *ngIf="Data && Data.weather && Data.weather.length > 0">
   <p *ngFor="let item of Data.weather  | keyvalue">
         Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>          
   </p>
</ng-container>