2017-10-06 113 views
4

我搜索了前面的線索詢問此錯誤消息。從我能找到的這個錯誤消息有兩個記錄的原因。屬性'toPromise'類型上不存在'Observable <Response>

  1. 缺少import 'rxjs/add/operator/toPromise'import 'import 'rxjs/add/operator/map'

  2. 錯誤與Visual Studio(這我不使用)。

這是問題

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 

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

import { Event } from './event'; 

@Injectable() 
export class EventService { 

    private eventsUrl = 'api/events'; // URL to web api 
    private headers = new Headers({'Content-Type': 'application/json'}); 

    constructor(private http: Http) { } 

    getEvents(): Promise<Event[]> { 
    return this.http.get(this.eventsUrl) 
       .toPromise() 
       .then(response => response.json().data as Event[]) 
       .catch(this.handleError); 
    } 
} 

代碼上面的代碼給我的錯誤Property 'toPromise' does not exist on type 'Observable<Response>'

編輯:感謝@estus我發現我安裝的軟件包中的一個錯誤。該軟件包有自己的node_modules,它也有rxjs導致項目中出現重複的rxjs。

+0

請問您爲什麼使用「toPromise」?除非在極少數情況下使用舊服務返回時才推薦。 (哪個Angular的Http不是其中之一。)注意:angular.io中的教程仍然存在,但它目前已過時。 – DeborahK

+0

@DeborahK我明白了。我正在遵循toh教程,這就是它的原因。感謝您的信息。我將研究如何處理由Angular Http返回的Observable的正確方法。 – dendrobium

+0

您正在使用哪個版本的Angular?根據版本,HTTP響應將以不同的方式處理 –

回答

0

感謝@estus。我發現我錯誤地安裝了一個軟件包。該軟件包有自己的node_modules,它也有rxjs,導致項目中出現重複的rxjs包。

0

考慮從@angular/http進口Response這樣的:

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

也許也升級到打字稿的最新版本可以幫助:

npm i -g [email protected] 

一個側面說明也最好是單獨像導入可觀測這來自Rxjs而不是整個庫:

import { Observable } from 'rxjs/Observable'; 
+0

我嘗試導入響應,它是相同的結果。我不得不降級打字稿到2.4.0因爲這個錯誤'類'主題'錯誤地擴展了基類'Observable '。'我現在試圖擺脫toPromise,因爲根據DeborahK該教程已過時。 – dendrobium

+0

當然沒問題,我通常在回答時我不想強迫選擇,我只是堅持這個問題,因爲其他搜索雲的人最終會在這裏結束,他們只是想解決問題標題中提到的問題。所以最好刪除這個問題,如果這個問題變得無關緊要,可以換一個。順便說一下,您是使用角度cli生成項目還是從過時的回購中克隆它? –

+0

好點。而且我使用角色創建新的''。 – dendrobium

2

您可能需要按照使用新HttpClient的更新文檔:https://angular.io/guide/http(儘管它們沒有服務中的代碼)。

服務

然後在服務的代碼應該是這樣的:

import { Injectable } from '@angular/core'; 
import { HttpClient} from '@angular/common/http'; 

import { Observable } from 'rxjs/Observable'; 

import { IMovie } from './movie'; 

@Injectable() 
export class MovieService { 
    private moviesUrl = './api/movies/movies.json'; 

    constructor(private http: HttpClient) { } 

    getMovies(): Observable<IMovie[]> { 
     return this.http.get<IMovie[]>(this.moviesUrl); 
    } 
} 

組件

和組件代碼調用此方法應該是這樣的:

ngOnInit(): void { 
    this.movieService.getMovies() 
     .subscribe((movies: IMovie[]) => this.movies = movies); 
} 
+0

即使我發現了toPromise行爲不當的原因。我會嘗試使用最新的方式來處理您的建議中的http請求。謝謝! – dendrobium

相關問題