RxJS 门面架构下 Observable 绑定API数据未在页面渲染问题

问题根因 #

RxJS 中 Angular HttpClient 返回的是冷 Observable，仅在存在订阅者时才会真正执行内部的请求逻辑。你目前仅调用了 loadInvestments() 方法，没有对其返回的 Observable 进行订阅，因此 API 请求从未发起，状态服务中的 BehaviorSubject 一直保持初始值 null，页面自然无法渲染数据。
你在 ngOnInit 中打印的 loadInvestments() 结果只是 Observable 对象本身，并不是接口返回的数据，也是同一个原因导致。

修复方案 #

第一步：订阅请求触发接口调用 #

修改 menu.component.ts 的 ngOnInit 逻辑，主动订阅 loadInvestments() 返回的 Observable，同时建议补充错误处理逻辑：

ngOnInit(): void {
  this.coreService.loadInvestments()
    .subscribe({
      error: err => console.error('投资数据加载失败：', err)
    });
}

如果你的 Angular 版本 >=14，也可以搭配 takeUntilDestroyed 操作符自动处理订阅销毁，避免内存泄漏：

// 先引入操作符
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

ngOnInit(): void {
  this.coreService.loadInvestments()
    .pipe(takeUntilDestroyed())
    .subscribe({
      error: err => console.error('投资数据加载失败：', err)
    });
}

第二步：处理初始值兼容遍历逻辑 #

你的状态服务中 BehaviorSubject 初始值为 null，直接用 *ngFor 遍历会抛出运行时错误，建议二选一处理：

1. 修改状态服务初始值为空数组

// StateService 中修改初始化代码
private investments$ = new BehaviorSubject<any[]>([]);

2. 模板中新增非空判断

<div>
    test
</div>
<ng-container *ngIf="investments$ | async as investments">
  <div *ngFor="let investimentPortifolio of investments">
      {{investimentPortifolio | json}}
  </div>
</ng-container>

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