В моем тестовом проекте Angular я думаю, что что-то не так с моей функцией отображения

Question

Предполагается вызвать API pixabay для поиска изображений.Все остальное кажется хорошим, однако, когда я ищу что-либо, я не получаю результаты изображений.Я думаю, что это из-за линии отображения, но не уверен, я новичок с Angular

import {Injectable} from '@angular/core';
import { environment } from '../../environments/environment';
import { Http, Headers } from '@angular/http';
import { map } from 'rxjs/operators'

@Injectable()
export class ImageService{
  private query: string;
  private API_KEY: string = environment.PIXABAY_API_KEY;
  private API_URL: string = environment.PIXABAY_API_URL;
  private URL: string = this.API_URL + this.API_KEY + '&q=';
  private perPage: string = "&per_page=10";

constructor(private _http: Http) { }

getImage(query){
    return this._http.get(this.URL + query + this.perPage).map(res => 
        res.json());
    }
}

Это фрагмент моего image-list.component.ts:

handleSuccess(data){
   this.imagesFound = true;
   this.images = data.hits;
   console.log(data.hits);
 }


 handleError(error){
  console.log(error);

 }

constructor(private _imageService : ImageService) { }

searchImages (query: string){
    return this._imageService.getImage(query).subscribe(
        data => this.handleSuccess(data),
        error => this.handleError(error),
        () => this.searching = false
    );
}

ngOnInit() {}

Answer 1

Вы видите сообщение об ошибке:

 ERROR TypeError: this._http.get(...).map is not a function at ImageService.push../src/app/shared/image.service.ts.ImageService.getImage (image.service.ts:18) at ImageListComponent.push../src/app/image-list/image-list.component.ts.ImageListComponent.searchImages (image-list.component.ts:30) at Object.eval [as handleEvent] (ImageListComponent.html:7) at handleEvent (core.js:10258)

В нем упоминается, что map не является функцией.Его необходимо импортировать;

import 'rxjs/add/operator/map'

Используемый вами импорт не является правильным способом доступа к этой функции.

import { map } from 'rxjs/operators'

Для получения дополнительной информации см. Этот пост StackOverflow , который объясняет решение более подробно.