属性"toPromise"在类型"可观察<Response>"上不存在

Question

我搜索了以前的线程询问此错误消息。据我所知，此错误消息有两个记录的原因。

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，导致项目内出现重复的 rxj。

Answer 1

您可能希望按照更新的文档进行操作，了解如何使用新的 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);
}

Answer 2

感谢@estus。我发现我错误地安装了其中一个软件包。该包有自己的node_modules，该也有 rxjs，导致项目内出现重复的 rxjs 包。

Answer 3

考虑像这样从@angular/http导入Response：

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

也许升级到最新版本的打字稿也会有所帮助：

npm i -g typescript@latest

附带说明一下，最好像这样从 Rxjs 而不是整个库中单独导入 Observable：

import { Observable } from 'rxjs/Observable';