时间戳

首页 > 解决方案 > Angular 2：“可观察”类型上不存在属性“地图”'

angular - Angular 2：“可观察”类型上不存在属性“地图”'

问题描述

发出 get 请求时出现以下错误。

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

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

代码：

 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

解决方案

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

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

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

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

可以使用 type 参数对响应进行类型检查

Http返回一个observable和我们可以告诉HttpClient.get返回response作为 IEmployee 类型当我们使用http.get<IEmployee[]>(...)then 它返回类型的实例Observable<IEmployee[]>。

在您的组件subscribe中Observable<IEmployee[]>获取 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+ 已经转移到Pipeable 操作符以改进树抖动并更容易创建自定义操作符

新进口

import { map} from 'rxjs/operators';

并更改.map(...) to .pipe(map(..))
PS：如果您使用的是修改后的代码，则不需要HttpClientModule

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

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

推荐阅读