如何在TypeScript中将API订阅值存入全局变量？

问题核心在于HTTP请求是异步操作，subscribe的回调执行时机晚于category数组的初始化，所以直接在数组里引用this.resultCount会得到undefined。以下是几种可行的解决办法：

方法一：在回调中更新目标数组 #

等API数据返回后，再修改category数组的对应值，确保数据已就绪：

getResult(){
  this.service.getResultCount("Horror").subscribe((res)=>{
    console.log(res.data, "Output");
    this.resultCount = res.data;
    // 数据返回后更新category数组
    this.category[0].value = this.resultCount;
  });
}

// 初始化时先给value设默认值（可选）
category: any[] = [
  {
    "name" : "book",
    "value" : null 
  }
];

方法二：用BehaviorSubject实现全局状态共享 #

如果需要在多个组件中共享这个数据（真正的全局变量），可以在服务中使用BehaviorSubject来存储和分发数据：

第一步：修改服务代码 #

import { BehaviorSubject, tap } from 'rxjs';

// 定义BehaviorSubject，初始值设为null或默认值
private resultCountSubject = new BehaviorSubject<any>(null);
// 暴露可观察对象供外部订阅
public resultCount$ = this.resultCountSubject.asObservable();

getResultCount(category: any): Observable<any> {
  let cat = category;
  return this._http.get(`${this.castapi}/cat/${cat}`).pipe(
    tap(res => {
      // 数据返回后更新Subject的值
      this.resultCountSubject.next(res.data);
    })
  );
}

第二步：组件中使用 #

ngOnInit() {
  // 先调用API获取数据
  this.service.getResultCount("Horror").subscribe();
  
  // 订阅Subject，实时获取最新数据
  this.service.resultCount$.subscribe(count => {
    if(count) {
      this.resultCount = count;
      this.category[0].value = count;
    }
  });
}

category: any[] = [
  {
    "name" : "book",
    "value" : null 
  }
];

这种方式的优势是，任何订阅了resultCount$的组件都能自动获取最新数据，适合跨组件的全局数据共享。

方法三：使用async管道（Angular专属） #

如果只是在模板中使用数据，可以直接用Angular的async管道，避免手动订阅：

组件代码 #

resultCount$: Observable<any>;

ngOnInit() {
  this.resultCount$ = this.service.getResultCount("Horror").pipe(
    map(res => res.data)
  );
}

模板代码 #

<!-- 直接展示数据 -->
<div>Book count: {{ resultCount$ | async }}</div>

<!-- 结合*ngIf获取本地变量，用于复杂场景 -->
<ng-container *ngIf="resultCount$ | async as count">
  <div>{{ category[0].name }} value: {{ count }}</div>
</ng-container>

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