Angular 13中subscribe外部获取异步数据出现undefined的解决方法

问题原因 #

heroService.showData()是异步操作（通常是HTTP请求或Observable异步流），subscribe的回调函数会在数据返回后才执行。但你在ngOnInit里同步调用了getRowData()和getWrapperGridData()，getWrapperGridData()会先于subscribe回调执行，此时this.onlineData还未被赋值，所以输出undefined。

解决方案 #

方案1：在异步回调内调用依赖方法

修改getRowData，在数据赋值完成后再调用getWrapperGridData，确保数据已加载：

getRowData() {
  this.showDataServiceSubscription = this.heroService.showData().subscribe((data) => {
    this.onlineData = data;
    console.log('onlineData 1', this.onlineData);
    // 数据就绪后调用方法
    this.getWrapperGridData();
  })
}

ngOnInit(){
  this.getRowData();
}

方案2：使用async/await（将Observable转为Promise）

通过firstValueFrom（Angular 12+推荐）将Observable转为Promise，配合async/await实现同步化调用：

import { firstValueFrom } from 'rxjs';

async getRowData() {
  // 等待异步数据返回
  this.onlineData = await firstValueFrom(this.heroService.showData());
  console.log('onlineData 1', this.onlineData);
}

async ngOnInit(){
  await this.getRowData();
  // 数据加载完成后执行
  this.getWrapperGridData();
}

额外注意：防止内存泄漏

记得在组件销毁时取消订阅，避免内存泄漏：

ngOnDestroy() {
  this.showDataServiceSubscription?.unsubscribe();
}

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