Question

我正在尝试显示有关天气城市的信息，但我认为最后一刻我遇到了麻烦。该API是OpenWeatherMap，该调用基于docs。我已经检查过这个post，试图遵循其逻辑，但是我的问题仍然存在，数据无法呈现，并出现错误“错误错误：找不到类型为'对象'的其他支持对象'[对象对象]'。 NgFor仅支持绑定到数组等Iterable。”

这是我的服务

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 interface RootObject {
  coord: Coord;
  sys: Sys;
  weather: Weather[];
  main: Main;
  wind: Wind;
  rain: Rain;
  clouds: Clouds;
  dt: number;
  id: number;
  name: string;
  cod: number;
}

interface Clouds {
  all: number;
}

interface Rain {
  '3h': number;
}

interface Wind {
  speed: number;
  deg: number;
}

interface Main {
  temp: number;
  humidity: number;
  pressure: number;
  temp_min: number;
  temp_max: number;
}

interface Weather {
  id: number;
  main: string;
  description: string;
  icon: string;
}

interface Sys {
  country: string;
  sunrise: number;
  sunset: number;
}

interface Coord {
  lon: number;
  lat: number;
}

组件：

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向我显示检索到的对象。此映射中我缺少什么？

Answer 1

正如错误日志所述，似乎您正在遍历对象而不是数组。 console.log说什么？

我假设您不是在获取数组，而是一个对象。

另一件事是getForecast方法的用法。 httpClient始终返回一个Observable，您只能确定所需的类型：

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));
}

Answer 2

我现在对您的rest api进行了更深入的研究。假设要始终列出风速，则必须执行以下操作：

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));
}

在您的模板中：

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

Answer 3

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

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));

  }

组件：

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>

我的目标还不够深入，因为获取的数据是一个嵌套对象

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

3 个答案: