Question

我是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的原始响应？

Answer 1

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

在component.ts中：

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

然后在模板中：

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

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

请注意，如果您在异步管道中使用的是HTTP支持的可观察对象，请务必小心。如果您使用多个具有性能问题的异步管道，则会产生不必要或意外的http调用次数。

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

1 个答案: