Angular中如何在subscribe外部使用API请求返回的data变量？

你的问题不是作用域问题，而是异步操作的时序问题：getPosts()是异步API请求，subscribe里的回调函数会在API返回数据后才执行，但createChart()是同步调用的——这意味着createChart()执行时，data还没被API返回的结果赋值，所以会出现undefined。

解决方法1：将createChart()移到subscribe回调内 #

确保数据获取完成后再执行后续逻辑：

ngOnInit(): void {
  this.service.getPosts().subscribe(response => {
    this.data = response;
    // 数据就绪后再创建图表
    this.createChart();
  });
}

解决方法2：处理错误场景（推荐） #

加上错误回调，避免数据请求失败时程序异常：

ngOnInit(): void {
  this.service.getPosts().subscribe({
    next: (response) => {
      this.data = response;
      this.createChart();
    },
    error: (error) => {
      console.error('数据请求失败:', error);
      // 可添加错误处理逻辑，比如设置默认数据、显示错误提示
    }
  });
}

解决方法3：使用async/await（RxJS 6+） #

如果习惯同步写法，可以用firstValueFrom将Observable转为Promise：

import { firstValueFrom } from 'rxjs';

// ...

async ngOnInit(): Promise<void> {
  try {
    this.data = await firstValueFrom(this.service.getPosts());
    this.createChart();
  } catch (error) {
    console.error('数据请求失败:', error);
  }
}

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