Angular组件调用含Observable的服务方法返回undefined问题

架构老林

2026-10-2

问题根因

你定义的createMenu方法本身没有显式声明返回值，默认返回undefined。你写在subscribe回调函数内的return只作用于回调本身，不会作为createMenu方法的返回值向外传递。
Angular的HttpClient发起的HTTP请求是异步操作，调用createMenu时请求还没拿到响应结果，subscribe内的赋值逻辑还没执行，就算你直接访问coreService.products也拿不到值。

解决方案

推荐直接返回Observable让组件侧订阅，是Angular生态下最符合设计规范的写法：

第一步修改CoreService代码

import { map } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class CoreService {
    public products;
    constructor(private api: ConsolidadoApi, private state: StateService) { }

    public createMenu() {
        // 直接返回Observable，不在服务内订阅
        return this.api.getInvestiments().pipe(
            map(response => {
                console.log(response.carteiras[0])
                this.products = response.carteiras[0]
                return this.products;
            })
        )
    }
}

第二步修改MenuComponent代码

export class MenuComponent implements OnInit {
  constructor( private coreService : CoreService ) {}

  ngOnInit(): void {
    // 组件侧订阅拿到返回值
    this.coreService.createMenu().subscribe(products => {
      console.log(products)
      // 拿到数据后再执行渲染、赋值等后续逻辑
    })
  }
}