Angular 角度：显示带有多个接口的JSON API调用

我正试图展示有关气象城市的信息，但我想我在最后一刻遇到了麻烦。API是OpenWeatherMap，调用基于文档。我已经检查了这个，试图遵循它的逻辑，但我的问题仍然存在，数据无法呈现，错误为“错误错误：找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到数组等可重用对象。”

这是我的服务：

export class WeatherService {

constructor(private http: HttpClient) { }

forecast: RootObject;

getForecast() {
  const url = 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
  return <Observable<RootObject[]>> this.http.get(url)
  .pipe(
      retry(3),
      catchError(this.handleError));
}

组成部分：

export class MainComponent implements OnInit {

foreCast: RootObject[];

  constructor(private weatherService: WeatherService) {
    this.getForecast();
   }

  ngOnInit() {
  }

getForecast() {
  this.weatherService.getForecast()
  .subscribe(data => {
    this.foreCast = data;
    console.log(this.foreCast);
  });
}

以及HTML：

<ul *ngFor="let wind of foreCast">


<li>{{wind.speed}}</li>

</ul>

{{风速}

这是我得到的日志：

---

所有导入都已就绪，并且console.log将显示检索到的对象。在这个映射中我遗漏了什么？

正如错误日志所说，您似乎在迭代对象而不是数组。 console.log怎么说

我假设你得到的不是一个数组，而是一个对象

另一件事是getForecast方法的使用。httpClient始终返回一个可观察的，您只能确定您期望的类型：

getForecast():Observable<RootObject[]> {
  const url = 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
  return this.http.get<RootObject[]>(url)
  .pipe(
      retry(3),
      catchError(this.handleError));
}

getForecast（）：可观察{
常量url=http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
返回此.http.get（url）
.烟斗(
重试（3），
catchError（this.handleError））；
}

我现在对您的RESTAPI有了更深入的了解。 假设您希望始终列出风速，则必须执行以下操作：

getForecast():Observable<RootObject[]> {
  const url = 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
  return this.http.get<RootObject[]>(url)
  .pipe(
      map(res => res.list)
      retry(3),
      catchError(this.handleError));
}

getForecast（）：可观察{
常量url=http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
返回此.http.get（url）
.烟斗(
映射（res=>res.list）
重试（3），
catchError（this.handleError））；
}

在模板中：

<ul *ngFor="let obj of foreCast">
  <li>{{obj.wind.speed}}</li>
</ul>

{{obj.风速}

解决方案非常简单：只需针对嵌套对象并初始化模型

Service.TS：

getForecast(): Observable<RootObject[]> {
    const url = 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
    return this.http.get<RootObject[]>(url)
    .pipe(
      retry(3),
      catchError(this.handleError));

  }

主要问题是，呈现数据：

<div class="container" >
  <ul *ngFor="let list of forecasts.list">
      <li>{{list.dt}}</li>
      </ul>
</div>

{{list.dt}

---

我瞄准的深度不够，因为获取的数据是嵌套对象

我用图片编辑了答案。我知道我得到了一个对象，但我以为我在对象类型数组中插入了它？好吧，现在我得到了这个错误：引用错误：映射未定义等等，我对映射有问题，我想我错过了一个导入我准备了一个示例：复制片段，它在stackblitz中无法直接工作，因为您的api未通过安全连接提供谢谢您的支持，很抱歉，我不在办公室，我将尝试您的示例精彩，现在可以工作了…我不知道投票的答案，请随意编辑或删除任何api，再次感谢：）嗯@fabi_k，您的解决方案有效，我得到了渲染的数据，但我没有使用接口，这是本文的主要目的…不过还是要谢谢你

forecasts: RootObject[] = []; //Initialize

  constructor(private weatherService: WeatherService) {
    this.getForecast();
  }

  getForecast() {
    this.weatherService.getForecast()
      .subscribe(data => {
        this.forecasts = data;
        console.log(this.forecasts);
      });
  }

<div class="container" >
  <ul *ngFor="let list of forecasts.list">
      <li>{{list.dt}}</li>
      </ul>
</div>