Angular 11调用服务方法时报Cannot read property 'subscribe' of undefined如何解决

• getPosts方法声明返回Observable<Employee[]>，但实际运行时返回值为undefined：你在方法内部直接对this.http.get返回的Observable调用了subscribe，最后执行空返回语句return;，导致调用方拿到的是undefined，对undefined执行subscribe方法就会触发当前报错。
• subscribe回调内的return data只作用于回调函数本身，不会作为getPosts的返回值向外传递，同时subscribe的返回值是Subscription类型，也不是你需要的Observable类型。

Angular中HTTP请求的最佳实践是服务侧返回Observable，调用侧（组件）订阅，你可以按以下方式修改代码：

1. 调整服务的getPosts方法，直接返回http.get产生的Observable，若需要保留请求结果打印逻辑，用RxJS的tap操作符实现：

// 顶部先导入tap操作符
import { tap } from 'rxjs/operators';

public getPosts(): Observable<Employee[]>{
  return this.http.get<Employee[]>('http://localhost:84/api/User').pipe(
    // 用tap执行打印等副作用操作，不改变数据流
    tap(data => console.log(data))
  );
}

2. 组件中的getEmployees代码无需调整，可直接正常调用subscribe获取数据。

如果一定要在服务内部完成订阅，可以通过回调函数传递数据，但会丢失Observable的响应式能力、不支持链式操作、错误处理复杂度更高，实现代码如下：

// 服务方法修改
public getPosts(dataCallback: (data: Employee[]) => void): void {
  this.http.get<Employee[]>('http://localhost:84/api/User').subscribe(data => {
    console.log(data);
    dataCallback(data);
  });
}

// 组件调用逻辑对应修改
public getEmployees(){   
  this.appService.getPosts(data => {
    this.employees = data; 
    this.employees.shift();
  }); 
}

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