Angular中Observable<Response>无法使用map操作符的问题

这个问题主要是RxJS版本更新导致的操作符导入方式变化，再加上Angular旧Http服务的特性问题，我给你两种解决方案，优先推荐第一种更现代的写法：

方案1：切换到HttpClient（推荐，官方已废弃Http服务） #

HttpClient是Angular官方推荐的新HTTP客户端，它会自动帮你解析JSON响应，不需要手动调用res.json()，同时完美适配RxJS 6+的写法：

步骤1：在根模块中导入HttpClientModule #

打开app.module.ts，添加以下配置：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...保留你已有的其他模块
    HttpClientModule
  ]
})
export class AppModule { }

步骤2：修改你的DataService #

替换旧的Http为HttpClient，并简化getPosts方法：

import { Injectable } from '@angular/core';
// 导入HttpClient而非旧的Http
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // 构造函数注入HttpClient
  constructor(public http: HttpClient) {
    console.log("Data service connected...");
  }

  getPosts() {
    // HttpClient自动解析JSON，直接返回Observable给调用方
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

方案2：继续使用旧Http服务（不推荐） #

如果你因为项目兼容性问题必须保留Http服务，需要适配RxJS 6+的管道式操作符写法：

修改你的DataService代码 #

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
// RxJS 6+需要从operators目录导入map，并通过pipe包裹使用
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(public http: Http) {
    console.log("Data service connected...");
  }

  getPosts() {
    // 务必加上return，否则调用方无法获取Observable进行订阅
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
      .pipe(map(res => res.json()));
  }
}

额外提醒 #

你的原代码中getPosts方法没有返回值，就算map操作符正常工作，调用这个方法的组件也无法获取数据进行订阅，所以一定要加上return关键字！

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