Angular5+Ionic3项目中HttpClient报错：Property 'map'不存在于void类型

嘿，我来帮你搞定这个问题！看了你的代码，主要是几个小细节出了问题，咱们一步步来修正：

1. 首先是语法括号漏了！ #

你在.do((res : Response ) => console.log(res.json())这行末尾少了一个闭合的)，导致后面的.map()被错误地嵌套进了do的回调函数里。TypeScript一看这结构，就认为do的返回值是void，自然找不到map方法啦。

2. HttpClient和旧Http搞混了 #

你同时导入了新的HttpClient和旧版的Http，但构造函数里注入的是HttpClient——划重点：

• 新版HttpClient的get()方法会自动把响应解析成JSON对象，根本不需要手动调用res.json()
• 只有旧版的Http才需要用res.json()来解析响应

3. 额外的小优化（可选） #

虽然你导入了RxJS的补丁式操作符（rxjs/add/operator/xxx），但咱们可以让代码更简洁，同时修复catch的小问题——catch必须返回一个Observable，不能只打印错误哦。

修正后的完整代码 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
// 删掉没用的旧Http导入，减少混淆
// import {Http ,Response } from '@angular/http';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class RemoteService {
  getApiUrl: string = "https://jsonplaceholder.typicode.com/posts";
  
  constructor(public http: HttpClient) {
    console.log('Hello RemoteServiceProvider Provider');
  }

  getPosts() {
    return this.http.get(this.getApiUrl)
      // HttpClient返回的已经是解析好的JSON，直接打印就行
      .do(res => console.log('响应数据:', res))
      // 如果不需要转换数据，这个map其实可以删掉；要是要加工数据，直接处理res就行
      .map(res => res)
      .catch(error => {
        console.error('请求出错:', error);
        // catch必须返回Observable，这里可以抛出错误或者返回默认值
        return Observable.throw(error);
      });
  }
}

更简洁的版本（去掉多余的map） #

如果你的getPosts只是要获取数据并打印日志，那map完全可以省略，代码更清爽：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class RemoteService {
  getApiUrl: string = "https://jsonplaceholder.typicode.com/posts";
  
  constructor(public http: HttpClient) {
    console.log('Hello RemoteServiceProvider Provider');
  }

  getPosts(): Observable<any[]> {
    return this.http.get<any[]>(this.getApiUrl)
      .do(res => console.log('获取到的帖子:', res))
      .catch(error => {
        console.error('获取帖子失败:', error);
        return Observable.throw(error);
      });
  }
}

最后再划一遍重点 #

• 先把漏的括号补上，这是最直接的语法错误
• 别再用res.json()啦，HttpClient已经帮你做好了解析
• catch里一定要返回Observable，不然订阅这个方法的地方会出问题

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