Angular 6 Невозможно отобразить ответ на Observable?

Question

Я новичок в Angular и пытаюсь создать простой POC.

Я создал службу, которая вызывает API OpenWeatherMap

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}...]
}

Я присваиваю ответ 'weather':

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» (например, «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-вызовов, если вы используете более одного асинхронного канала, который имеет проблемы с производительностью.