угловой: HttpClient map response

В настоящее время я переключаюсь с http (@angular/http) на HttpClient (@angular/common/http) и имеет проблемы с отображением моего ответа на объекты.

Старый код (работал до этого)

this.http.get(environment.baseUrl + '/api/timeslots')
            .map((response: Response) => {
                    const data = response.json();
                    const timeslots = Array.of<Timeslot>();
                    for (const item of data) {...}

Новый код, но ошибка компиляции:

this.httpClient.get(environment.baseUrl + '/api/timeslots')
                .map((response: Response) => {
                        const data = <Timeslot[]> response;
const timeslots = Array.of<Timeslot>();
                    for (const item of data) {...}

Я скучаю по актерскому составу? Ответ - это массив Timeslots.

Ответ 1

Значение по умолчанию, возвращающее новый HttpClient, - Object. Он автоматически вызывает response.json() внутренне.

Вы можете указать HttpClient, какой тип ответа будет, так что:

this.httpClient.get<Timeslot[]>(...)
 .map((timeSlots) => {
   ...

где тип timeSlots будет timeSlots Timeslot[]

Дополнительная информация о typecheking в новом HttpClient

https://angular.io/guide/http#typechecking-the-response

Ответ 2

Вы все еще можете, но вам нужно импортировать map() -operator из rxjs следующим образом:

import 'rxjs/add/operator/map';

И у вас будет оператор map().

(См. Также мой ответ здесь: fooobar.com/questions/848097/...)

Ответ 3

Начиная с Angular 6/7 было несколько изменений в реализации библиотеки RxJS в Angular.

Следовательно, операторы RxJS теперь расположены в "rxjs/operator" вместо "rxjs/add/operator/: OperatorName". Кроме того, эти операторы больше не могут быть напрямую связаны с наблюдением, вместо этого они должны быть связаны с помощью метода pipe().

Итак, новый способ реализации этого должен выглядеть следующим образом:

import {map} from 'rxjs/operators';

this.http.get(...)
  .pipe(
    map( response => {
     // TODO: Do Your Staff Here! 
   } )
  );

Пожалуйста, обратитесь к конкретной угловой документации здесь для более подробной информации. * Здесь я предполагаю, что ваш компонент HttpClient доступен по this.http.