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);
}
}
运行命令: 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'
.
任何人都可以解决这个问题,请提前谢谢。
解决方案
您从 rxJs 导入的 map 函数是一个 pipable 运算符。
你应该像这样使用它:this.http.get(this.url).pipe(map(this.extractData))
. 你应该像这样使用它而不是rxjs/add/operator/map
像下面建议的那样使用它,因为这是使用 RxJs >= v5.X 的操作符的推荐方式
此外,您应该使用HttpClient
from@angular/common/http
而不是Http
.
推荐阅读
- android-pendingintent - 待处理的意图在几个小时后停止工作
- python - 如何在 TensorFlow 中调用经过训练的 NN 来训练另一个 NN?
- influxdb - 根据命令将 fieldType 字符串更改为在 Influx 中浮动:显示字段键
- python - 收益和回报有什么区别?
- scala - 坚持编写一个多态转置函数,该函数接受并返回数组或序列/向量的 RDD
- c++ - var 已通过“if (var = 0 || var == 0)”语句更改为 1
- naming-conventions - 作为下划线的“public”的常规前缀是“private”?
- python-3.x - 西班牙 POS 标记器 CESS,我如何在我的代码中实现它
- ios-simulator - Xcode 10.1 模拟器显示黑屏
- ckeditor - 通过 CKEditor 4 显示格式化文本