Angular 2组件内异步API数据赋值后无法全局使用问题求助

这是典型的异步操作时序问题，我来帮你拆解原因和解决方案：

问题根源 #

this._visitService.getchartData()返回的是一个Observable，而Observable的subscribe回调是异步执行的。当你运行这段代码时：

1. 浏览器发起API请求（这一步是异步的，不会阻塞后续代码）
2. 直接执行订阅外的console.log("OSubscribe", this.ReqData )和this.ImpoData = this.getData(this.ReqData)
3. 等到API请求成功返回后，才会执行subscribe里的回调，给this.ReqData赋值

所以订阅外的代码执行时，this.ReqData还没有被赋值，自然拿不到有效数据。

解决方案 #

方案1：将依赖数据的代码移到订阅回调内 #

这是最直接的解决方式，把所有需要用到ReqData的逻辑都放到subscribe的回调函数里，确保数据已经返回后再执行：

this._visitService.getchartData().subscribe(data => {
  this.ReqData = data;
  console.log("ISubscribe", this.ReqData );
  // 把原本在订阅外的代码移到这里
  console.log("OSubscribe", this.ReqData ); // 现在能拿到有效数据了
  this.ImpoData = this.getData(this.ReqData);
});

方案2：使用RxJS操作符优化代码逻辑 #

如果你的业务逻辑比较复杂，不想把所有代码都堆在回调里，可以用RxJS的pipe结合操作符来处理：

import { tap, map } from 'rxjs/operators';

// 方式一：用tap保存数据，subscribe里处理后续逻辑
this._visitService.getchartData()
  .pipe(
    tap(data => {
      this.ReqData = data;
      console.log("ISubscribe", this.ReqData );
    })
  )
  .subscribe(data => {
    this.ImpoData = this.getData(data);
    console.log("OSubscribe", data);
  });

// 方式二：用map直接处理数据，订阅时拿到处理后的结果
this._visitService.getchartData()
  .pipe(
    map(data => {
      this.ReqData = data;
      return this.getData(data); // 提前处理数据
    })
  )
  .subscribe(processedData => {
    this.ImpoData = processedData;
    console.log("处理后的数据", processedData);
  });

方案3：使用Angular的async管道（推荐用于模板渲染） #

如果ReqData是要在模板中使用的，推荐用async管道，它会自动帮你处理订阅和取消订阅，还能避免内存泄漏：
首先在组件中保存Observable：

// 组件类中定义
reqData$ = this._visitService.getchartData();

// 定义处理数据的方法
processData(data: any) {
  return this.getData(data);
}

然后在模板中使用：

<!-- 用async管道订阅Observable，as关键字把数据赋值给reqData变量 -->
<div *ngIf="reqData$ | async as reqData">
  <p>原始数据：{{ reqData | json }}</p>
  <p>处理后的数据：{{ processData(reqData) }}</p>
</div>

总结 #

记住一个核心原则：所有依赖异步Observable数据的操作，都必须放在订阅回调或者RxJS的异步流程中，不能在订阅外面同步执行，否则会因为数据还未返回而拿到空值。

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