Angular 6 Не удается сопоставить ответ с наблюдаемым?

#angular #observable

#angular #наблюдаемый

Вопрос:

Я новичок в 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=xxxamp;q=londonamp;units=metric')
  }
}

Ответ JSON выглядит следующим образом

 / 20190327154650
// http://api.openweathermap.org/data/2.5/forecast?appid=xxxamp;q=londonamp;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’ (например, ‘weather.cod’).

Как мне работать с исходным ответом из API?

1. покажите код, в котором вы назначаете переменную. Оба они не работают по уважительным причинам, но мне нужно посмотреть, как вы их назначаете, чтобы исправить это.

2. Похоже, проблема в том, что *ngFor ожидает массив, но API возвращает объект.

Ответ №1:

вот пример того, что будет работать (при использовании асинхронного канала)

в component.ts:

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

затем в шаблоне:

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

для асинхронного канала требуется наблюдаемый ввод, а для ngFor требуется итерируемый, поэтому вы решаете это с помощью оператора map.

Просто обратите внимание, будьте осторожны, если вы используете observable с поддержкой http с асинхронным каналом. Это может привести к ненужному или неожиданному количеству http-вызовов, если вы используете более одного асинхронного канала, что вызывает проблемы с производительностью.