ОШИБКА TypeError: this.http.get (...). Map не является функцией в BookService.push

Question

Так вот мой код books.service.ts:

import { Injectable } from '@angular/core';

import { Http, Response } from '@angular/http';

import { Observable } from 'rxjs';

import { map } from 'rxjs/operators';

//import {catch} from 'rxjs/operator';

//import { toPromise } from 'rxjs/operator';

import { Book } from './book';

//import 'rxjs/add/operator/map';

import 'rxjs/add/operators/catch';

import 'rxjs/operators/toPromise';



@Injectable()
export class BookService 
{
    url = "http://localhost:4200/assets/data/books.json";

    constructor(private http:Http) { }

    getBooksWithObservable(): Observable<Book[]> 
    {
        return this.http.get(this.url)
                .map(this.extractData)
                .catch(this.handleErrorObservable);
    }
    getBooksWithPromise(): Promise<Book[]> 
    {
        return this.http.get(this.url).toPromise()
            .then(this.extractData)
            .catch(this.handleErrorPromise);
    }
    private extractData(res: Response) 
    {
        let body = res.json();
        return body;
    }
    private handleErrorObservable (error: Response | any) 
    {
        console.error(error.message || error);
        return Observable.throw(error.message || error);
    }
    private handleErrorPromise (error: Response | any) 
    {
        console.error(error.message || error);
        return Promise.reject(error.message || error);
    }   
}

Выполнение команды: ng serve --open, выдает следующую ошибку:

ERROR in src/app/book.service.ts(24,12): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.

Также этодает мне другую ошибку, и это в observable.component.ts.Вот код observable.component.ts:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { BookService } from './book.service';
import { Book } from './book';

@Component({

   selector: 'app-observable',

   templateUrl: './observable.component.html'

})

export class ObservableComponent implements OnInit {

   observableBooks: Observable<Book[]>;

   books: Book[];

   errorMessage: String;

   constructor(private bookService: BookService) { }

   ngOnInit(): void {

        this.observableBooks = this.bookService.getBooksWithObservable();               

        console.log('observable');

        alert('observable');


        console.log(this.observableBooks);

        this.observableBooks.subscribe(

            books => this.books = books,

            error =>  this.errorMessage = <any>error);
   }    
}

Я получаю следующую ошибку в этом файле:

src/app/observable.component.ts(23,4): error TS2345: Argument of type 'void' is not assignable to parameter of type '(error: any) => void'.

Может кто-нибудь решить эту проблемупожалуйста, спасибо заранее.

Answer 1

Функция карты, которую вы импортируете из rxJs, является переносимым оператором.

Вы должны использовать ее следующим образом: this.http.get(this.url).pipe(map(this.extractData)).И вы должны использовать его так, а не импортировать из rxjs/add/operator/map, как предложено ниже, потому что это рекомендуемый способ использования операторов с RxJs> = v5.X

Кроме того, вы должны использовать HttpClient из @angular/common/http вместо Http.

Answer 2

Для первого решения: Свойство 'map' не существует для типа 'Наблюдаемый'.

Вам необходимо импортировать

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

Второе решение:

попробуйте удалить void из ngOnInit

ngOnInit() {

        this.observableBooks = this.bookService.getBooksWithObservable();               

        console.log('observable');

        alert('observable');


        console.log(this.observableBooks);

        this.observableBooks.subscribe(

            books: any  => this.books = books,

            error: any =>  this.errorMessage = <any>error);
   }    

Answer 3

Попробуйте добавить import 'rxjs/add/operator/map'; вместо import { map } from 'rxjs/operators';