Angular中Observable类型无法使用map操作符问题求助

嘿，这个问题我之前也碰到过！这是RxJS 6及以上版本带来的操作符使用方式变化导致的，你现在的代码还沿用着旧版本的写法，所以才会触发Property map is not available on type Observable的报错。下面一步步帮你搞定：

问题根源 #

在RxJS 6之前，我们通过import 'rxjs/add/operator/map'这种方式扩展Observable原型，从而直接链式调用.map()；但RxJS 6开始，官方推荐使用pipeable操作符——也就是把操作符放进pipe()方法里，同时导入方式也完全改变了。另外，你代码里用的Http模块在Angular 4.3之后已经被废弃，更推荐用HttpClient，它能自动解析JSON响应，还能简化代码逻辑。

具体修复步骤 #

• 替换RxJS导入语句
  删除旧的import 'rxjs/add/operator/map';，换成pipeable操作符的导入：

  import { map } from 'rxjs/operators';
  

• 替换Http为HttpClient
  先导入HttpClient而非Http：

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  

  然后在构造函数里替换依赖注入：

  constructor(private http: HttpClient) { }
  

  这样就不用手动调用res.json()了，HttpClient会自动把响应解析为JSON对象。

• 修改操作符调用方式
  把原来链式的.map()改成用pipe()包裹操作符的形式：

  • getAllLists()方法修改后：

    return this.http.get(URI).pipe(
      map(res => <List[]>res.lists)
    );
    

  • deleteList()方法修改后：

    return this.http.delete(URI, { headers }).pipe(
      map(res => res)
    );
    

修复后的完整代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { List } from '../models/List';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class ListService {
  constructor(private http: HttpClient) { }

  private serverApi= 'http://localhost:3000';

  public getAllLists(): Observable<List[]> {
    let URI = `${this.serverApi}/bucketlist/`;
    return this.http.get(URI).pipe(
      map(res => <List[]>res.lists)
    );
  }

  public deleteList(listId : string): Observable<any> {
    let URI = `${this.serverApi}/bucketlist/${listId}`;
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    return this.http.delete(URI, { headers }).pipe(
      map(res => res)
    );
  }
}

另外注意，原来的Headers也换成了HttpHeaders，这是Angular配合HttpClient推出的新类，用法和旧类一致，但更符合当前版本的规范。

这样修改后，你的报错应该就能彻底解决啦！

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