Question

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

缺少import 'rxjs/add/operator/toPromise'或import 'import 'rxjs/add/operator/map'
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>'

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

考虑从Response导入@angular/http，如下所示：

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

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

npm i -g typescript@latest

另一方面，最好从Rxjs而不是整个库中单独导入Observable：

import { Observable } from 'rxjs/Observable';

Answer 3

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

物业＆＃39; toPromise＆＃39;类型＆＃39; Observable <response>上不存在

3 个答案: