Angular 错误类型错误：this.http.get（…）.map不是BookService.push中的函数

这是我的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);
    }   
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map}；
//从'rxjs/operator'导入{catch}；
//从'rxjs/operator'导入{toPromise}；
从“/Book”导入{Book}；
//导入'rxjs/add/operator/map'；
导入“rxjs/add/operators/catch”；
导入“rxjs/operators/toPromise”；
@可注射（）
出口类图书服务
{
url=”http://localhost:4200/assets/data/books.json";
构造函数（私有http:http）{}
getBooksWithObservable（）：Observable
{
返回this.http.get（this.url）
.map（此.extractData）
.catch（此.手柄不可维修）；
}
getBooksWithPromise（）：Promise
{
返回this.http.get（this.url）.toPromise（）
.然后（此.extractData）
.接住（这只手如箭头所示）；
}
私有数据（res:Response）
{
让body=res.json（）；
返回体；
}
private handleErrorObservable（错误：响应|任意）
{
console.error（error.message | | error）；
返回可观察的.throw（error.message | | error）；
}
私有句柄错误建议（错误：响应|任意）
{
console.error（error.message | | error）；
返回承诺。拒绝（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>'.

src/app/book.service.ts（24,12）中的

错误：错误TS2339:类型“Observable”上不存在属性“map”。

它也给了我其他的错误，那是在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);
   }    
}

从'@angular/core'导入{Component，OnInit}；
从“rxjs”导入{Observable}；
从“/book.service”导入{BookService}；
从“/Book”导入{Book}；
@组成部分({
选择器：“应用程序可观察”，
templateUrl:“./observable.component.html”
})
导出类ObservableComponent实现OnInit{
可观察的电子书：可观察的；
书籍：书籍[]；
错误消息：字符串；
构造函数（私有bookService:bookService）{}
ngOnInit（）：void{
this.observebooks=this.bookService.getbookswithobserveable（）；
控制台日志（“可观察”）；
警惕（“可观察”）；
console.log（这本电子书）；
这是我的电子书(
books=>this.books=books，
error=>this.errorMessage=error）；
}    
}

我在此文件中遇到以下错误：

src/app/observable.component.ts（23,4）：错误TS2345:类型为“void”的参数不能分配给类型为“（错误：any）=>void”的参数。

---

任何人都可以提前解决这个问题。

尝试添加

导入'rxjs/add/operator/map'

而不是从'rxjs/operators'导入{map}

从rxJs导入的映射函数是一个可管道操作符

您应该这样使用它：

this.http.get（this.url）.pipe（map（this.extractData））

。 您应该这样使用它，而不是像下面建议的那样从

rxjs/add/operator/map

导入，因为这是使用rxjs>=v5.X的操作符的推荐方法

---

此外，对于第一个解决方案，您应该使用

@angular/common/http

中的

HttpClient

，而不是

http

类型“Observable”上不存在属性“map”

你需要导入

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

第二种解决方案：

尝试从

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);
   }    

ngOnInit（）{
this.observebooks=this.bookService.getbookswithobserveable（）；
控制台日志（“可观察”）；
警惕（“可观察”）；
console.log（这本电子书）；
这是我的电子书(
书籍：any=>this.books=书籍，
错误：any=>this.errorMessage=error）；
}    

已添加，但显示以下错误：未找到模块：错误：无法解析'D:\Projects\wamp\www\ang\angular books demo\src\app'中的'rxjs/add/operator/map'是否已安装rxjs Dependencies？是的，我的朋友！在导入'rxjs/add/operator/map'时，我得到了错误：找不到模块：错误：无法解析'D:\Projects\wamp\www\ang\angular books demo\src\app'中的'rxjs/add/operator/map'，并且在删除void时没有发生任何事情：-（是的，安装了rxjs：查看package.json中的依赖项。依赖项：{“@angular/animations”：“^6.0.3”、“@angular/common”：“^6.0.3”、“@angular/compiler”：“^6.0.3”、“@angular/forms”：“^6.0.3”、“@angular/http”：“^6.0.3”、“@angular/platform browser”：“^6.0.3”，“@angular/platform browser dynamic”：“^6.0.3”，“@angular/router”：“^6.0.3”，“core js”：“^2.5.4”，“rxjs”：“^6.2.0”，“zone.js”：“^0.8.26”}，

导入{Observable}从'rxjs/Observable'；

下一步

导入'rxjs/add/operator/map'；

未发生。它说：找不到模块：错误：无法解析'D:\Projects\wamp\www\ang\angular books demo\src\app'中的'rxjs/Observable'。您使用的是什么版本的angular？您应该使用HttpClient。Http已被弃用，并且将（已经有？）使用dissapear。我正在使用Angular 2，因为我刚刚开始使用Angular。我对它很陌生，直接使用更新的方法不会让我理解以前的概念，比如“如何使用htttp”。我无法理解你的推理。学习一个过时的框架版本对你没有任何好处。但无论如何，这是一个自由的世界；-）.至于你的问题，你必须按照其他回答的建议处理你的导入。等等，忘记我刚才说的。我刚刚看到你下面的评论，你实际上使用的是angular v6.x和rxjs v6.x。所以你应该