Angular2的Http與RXJS可觀測類型錯誤：。this.http.get（...）地圖（...）美中不足的是不是一個函數

Question

我有以下這工作正常，直到今天，我得到這個錯誤服務

TypeError: this.http.get(...).map(...).catch is not a function. 

當我調試此代碼時，它碰到catch方法。

import { Test } from "./home.component"; 
import { Injectable }  from "@angular/core"; 
import { Inject } from "@angular/core"; 
import { Http , Response } from "@angular/http"; 
import { Observable }  from "rxjs/Observable"; 

@Injectable() 
export class HomeService { 
    public constructor(@Inject(Http) private http: Http) {} 

    public getData(): Observable<Test []> { 
     return this.http.get("./src/app/home/home-data.json") 
      .map(this.extractData).catch(this.handleError); 
    } 

    public extractData(res: Response) { 
     let body = res.json(); 
     return body.data || { }; 
    } 

    public handleError (error: any) { 
     // In a real world app, we might use a remote logging infrastructure 
     // We"d also dig deeper into the error to get a better message 
     let errMsg = (error.message) ? error.message : 
      error.status ? `${error.status} - ${error.statusText}` : "Server error"; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 
    } 

Answer 1

看起來catch操作符沒有導入。

你可以嘗試將其導入這樣的：

import 'rxjs/add/operator/catch' 

或者更一般這個，如果你想有更多的方法來觀測：

import 'rxjs/Rx'; 

看到這個問題：

• Angular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

Answer 2

我有同樣的問題，但在我的情況下，問題是，我已經導入所需的模塊幾次Module.ts

Answer 3

的「Ø」字符「rxjs/Ø bservable」必須是大寫。

指定它在小寫'o'，會給你這個和其他幽靈般的錯誤。 這必須引進這樣的：

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

我花了一個小時才找到它。 使用導入時，通常情況下，名稱爲小寫。 這是我第一次看到這個。 我希望它會幫助其他:)