角度2:类型"Observable< Response>"上不存在属性"map" [英] Angular 2: Property 'map' does not exist on type 'Observable<Response>'

问题描述

在发出get请求时出现以下错误.

I am getting the below errors while making the get request .

模块'node_modules/rxjs/Observable"'没有导出的成员"Observable".属性地图"在类型可观察"上不存在.

Module "'node_modules/rxjs/Observable"' has no exported member 'Observable'. Property 'map' does not exist on type 'Observable'.

我已经尝试了StackOverflow中提供的所有可能的解决方案，但对我而言不起作用.

I have tried all the possible solution provide in StackOverflow but it did not work for me.

代码:

 import { Injectable } from '@angular/core';
    import { IEmployee } from './employee';
    import { Http, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class EmployeeService {
        private  _url : string = 'apiData/employeedata.json'
        constructor(private _http: Http) { }
        getEmployees(): Observable<IEmployee[]> {

            return this._http.get(this._url)
                .map((response: Response) => <IEmployee[]>response.json());
        }
    }

推荐答案

您正在使用 Angular 6 ，而不是Angular 2
您正在使用已弃用的 HttpModule ，应使用 HttpClientModule 代替
在新的 HttpClientModule 中，JSON是假定的默认值，不再需要使用 res.json()
进行显式解析.在使用 HttpClient 之前，需要将Angular HttpClientModule 导入到根模块中.

You are using Angular 6 not Angular 2
You are using HttpModule which is deprecated you should use HttpClientModule instead
In new HttpClientModule JSON is an assumed default and no longer needs to be explicitly parsed using res.json()
Before you can use the HttpClient, you need to import the Angular HttpClientModule into root Module.

    import { NgModule }         from '@angular/core';
    import { BrowserModule }    from '@angular/platform-browser';
    import { HttpClientModule } from '@angular/common/http';

    @NgModule({
      imports: [
        BrowserModule,
        HttpClientModule,
      ],
//.......

您可以告诉 HttpClient 响应的类型，以使输出的使用更加容易和明显.

You can tell HttpClient the type of the response to make consuming the output easier and more obvious.

可以使用type参数来完成响应的类型检查

Type checking of response can be done by using the type parameter

Http 返回一个 observable ，我们可以告诉 HttpClient.get 以IEmployee类型返回 response 我们使用 http.get< IEmployee []>(...)，然后它返回 Observable< IEmployee []> 类型的实例.

Http returns an observable and We can tell the HttpClient.get to return response as IEmployee type When we use http.get<IEmployee[]>(...) then it returns the instance of Observable<IEmployee[]> type.

在您的组件中 subscribe 到 Observable< IEmployee []> 以获得IEmployee的实例

In your component subscribe to Observable<IEmployee[]> to get instance of IEmployee

为您提供服务

import { Injectable } from '@angular/core';
    import { IEmployee } from './employee';
    import { HttpClient} from '@angular/common/http';
    import { Observable } from 'rxjs/Observable';


    @Injectable()
    export class EmployeeService {
        private  _url : string = 'apiData/employeedata.json'
        constructor(private _http: HttpClient) { }
        getEmployees(): Observable<IEmployee[]> {

            return this._http.get<IEmployee[]>(this._url);

        }
    }

除此以外，RxJS v5.5.2 +已移至

Apart from it RxJS v5.5.2+ has moved to Pipeable operators to improve tree shaking and make it easier to create custom operators

新导入

import { map} from 'rxjs/operators';

，然后将 .map(...)更改为.pipe(map(..))
PS:如果您正在使用 HttpClientModule
，则不需要修改后的代码

 return this._http.get(this._url).pipe(
                    map((response: Response) => <IEmployee[]>response.json()));

我建议您停止使用 HttpModule ，而转而使用 HttpClientModule

I would suggest you to stop using HttpModule and go for HttpClientModule Instead

这篇关于角度2:类型"Observable< Response>"上不存在属性"map"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！