Angular 2报错：Observable<Response>无map属性及rxjs导入问题

嘿，这个问题我太熟了——你这是碰到RxJS版本升级的写法差异啦！RxJS 6及以后的版本彻底改了导入方式和操作符的使用逻辑，你的代码还是RxJS 5的老写法，所以才会报这些错。

问题根源 #

• RxJS 6不再从rxjs/Observable导出Observable类，而是直接从rxjs根目录导出
• 像map这类操作符，再也不能用rxjs/add/operator/map这种全局导入的方式了，必须用pipe()方法来组合操作符

一步步解决 #

1. 先更新导入语句 #

把原来的RxJS相关导入全部换成新写法，顺便提醒你：Angular 6+已经废弃了Http服务，推荐用HttpClient，它会自动帮你解析JSON，省掉很多麻烦：

import { Injectable } from '@angular/core';
import { IEmployee } from './employee';
// 换成HttpClient，Http已经被淘汰啦
import { HttpClient } from '@angular/common/http';
// Observable直接从rxjs导入
import { Observable } from 'rxjs';
// 操作符从rxjs/operators单独导入
import { map } from 'rxjs/operators';

2. 修改服务的实现代码 #

把Http换成HttpClient，然后用pipe()来包裹map操作符：

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

@Injectable()
export class EmployeeService {
  private _url: string = 'apiData/employeedata.json';

  // 构造函数里换成HttpClient
  constructor(private _http: HttpClient) { }

  getEmployees(): Observable<IEmployee[]> {
    // HttpClient.get可以直接指定返回类型，自动解析JSON，不用再调用response.json()
    return this._http.get<IEmployee[]>(this._url)
      .pipe(
        map(response => {
          // 如果不需要额外处理响应，这步map其实都可以省略
          return response;
        })
      );
  }
}

特殊情况处理 #

要是你因为项目限制必须继续用旧的Http服务，那代码改成这样也能解决问题：

import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// ...

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

另外，要是你项目里RxJS版本混乱，可以跑一下npm install rxjs@latest rxjs-compat@latest来对齐版本——不过rxjs-compat只是兼容旧代码的过渡方案，建议还是尽快迁移到新写法哦。

内容的提问来源于stack exchange，提问作者Richa Shukla