Angular 10报错：Cannot read properties of undefined reading 'subscribe'

错误根源 #

你遇到的Cannot read properties of undefined reading 'subscribe'错误，核心原因是**cartService.addProductToCart方法实际返回了undefined**，但组件里却尝试调用它的subscribe方法。

看你的服务代码：

addProductToCart(product:Product):Observable<any>{
    alert("Inside add product to cart");
     this.http.post<any>(cartUrl, {product}).subscribe(data =>{
       alert("To this point");
        this.postId=data.id; 
     console.log("Do I get Id from a post"+ this.postId)
  
   })  
     
   return
 
   }

这里的return语句没有返回任何值，默认返回undefined；同时你在服务内部直接订阅了http.post的Observable，这违背了RxJS的使用逻辑——服务应该把Observable返回给调用方（组件）去订阅，而非自己在内部订阅。

修复步骤 #

修改cartService的addProductToCart方法，正确返回HTTP请求的Observable，若需要在服务中保存postId，可以用pipe+tap操作符处理副作用：

import { tap } from 'rxjs/operators';

addProductToCart(product:Product):Observable<any>{
    alert("Inside add product to cart");
    // 用tap操作符处理获取postId的逻辑，不订阅，返回原Observable
    return this.http.post<any>(cartUrl, {product}).pipe(
      tap(data => {
        alert("To this point");
        this.postId = data.id; 
        console.log("Do I get Id from a post" + this.postId);
      })
    );
}

修改后，方法会正确返回Observable，组件里的subscribe调用就不会报错了。

额外说明 #

1. 服务的职责是封装数据请求逻辑，返回Observable让调用方决定如何处理订阅（比如组件内处理UI更新、消息发送）。
2. 若不需要在服务中保存postId，可直接简化为返回this.http.post的结果，无需额外操作。

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