时间戳

首页 > 解决方案 > Angular 6 无法将响应映射到 Observable？

angular - Angular 6 无法将响应映射到 Observable？

问题描述

我是 Angular 的新手，我正在尝试创建一个简单的 POC。

我创建了一个调用 OpenWeatherMap API 的服务

export class WeatherService {

  constructor(private http: HttpClient) { }

  fetchWeather(): Observable<Object> {
    return this.http.get('http://api.openweathermap.org/data/2.5/forecast?appid=xxx&q=london&units=metric')
  }
}

响应 JSON 看起来像

/ 20190327154650
// http://api.openweathermap.org/data/2.5/forecast?appid=xxx&q=london&units=metric

{
  "cod": "200",
  "message": 0.0082,
  "cnt": 40,
  "list": [{event1},{event2}...]
}

我将响应分配给“天气”：

this.weather = fetchWeather();

然后尝试迭代：

<li *ngFor="let event of weather.list | async">{{ event }}</li>

但什么都没有打印出来。

如果我嘲笑回应只是

[{event1},{event2}...]

然后它可以使用

<li *ngFor="let event of weather | async">{{ event }}</li>

我注意到的第一个问题是响应以评论开头。其次，我似乎无法访问“天气”的属性（例如“weather.cod”）。

如何处理来自 API 的原始响应？

标签： angularobservable

解决方案

这是一个可行的示例（如果使用异步管道）

在 component.ts 中：

this.weather = this.weatherService.fetchWeather().pipe(map(weather => weather.list));

然后在模板中：

<li *ngFor="let event of weather | async">{{ event }}</li>

异步管道需要一个可观察的输入，而 ngFor 需要一个可迭代的，因此您可以使用 map 运算符解决这个问题。

请注意，如果您使用带有异步管道的 http 支持的 observable，请小心。如果您使用多个具有性能问题的异步管道，它可能会产生不必要或意外数量的 http 调用。

推荐阅读