Angular中使用concatMap操作Observable时出现‘Property 'concatMap' does not exist on type 'Observable'’错误的解决求助

看起来你遇到的问题是RxJS版本差异导致的操作符使用方式不对，RxJS 6及以上版本对操作符的调用逻辑做了重大调整，咱们一步步来修正：

错误根源 #

在RxJS 6+版本中，所有操作符不再直接挂载在Observable的原型链上，不能像旧版本那样直接调用.concatMap()，必须通过pipe()方法来串联操作符，这就是你报错的核心原因。

修正后的代码 #

先确保使用正确的导入方式，再把concatMap放到pipe方法中执行：

import { Observable, of } from 'rxjs';
import { concatMap } from 'rxjs/operators'; // RxJS 6+ 正确导入方式

public updateUser(token: string, requestBody: any): Observable<User> { 
  const myHeaders = new HttpHeaders({ 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
    'Authorization': 'Bearer ' + token 
  }); 
  
  return this.http.put<User>(this.baseUrl + "api/user", requestBody, { headers: myHeaders })
    .pipe( // 用pipe包裹操作符
      concatMap(data => { 
        return of(data); 
      })
    );
}

额外优化提示 #

其实你当前的concatMap有点多余——this.http.put()本身已经返回了Observable<User>，直接返回它即可，不需要再通过of(data)转换。如果后续需要串联其他Observable操作（比如调用另一个接口），那上面的pipe+concatMap写法就是正确的。

两种导入方式的区别 #

• import 'rxjs/add/operator/concatMap'：这是RxJS 5及更早版本的写法，会把操作符添加到Observable原型上，支持直接调用.concatMap()
• import { concatMap } from 'rxjs/operators'：RxJS 6+的标准写法，操作符必须通过pipe()方法来串联使用

如果你的项目是RxJS 6+版本，一定要用第二种导入方式+pipe()的组合哦~

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