Angular中如何同步获取Observable数据并赋值全局变量？

Observable的订阅回调是异步执行的，ngOnInit中的同步代码会先于回调执行。所以你在subscribe外部打印this.products时，数据还没返回，自然是undefined；而setTimeout能拿到数据，是因为1秒后异步请求已经完成，回调已经执行赋值操作。

另外你用async管道失效，是因为products被声明为普通数组类型，而async管道只能处理Observable/Promise类型的变量。

方案一：在subscribe回调内处理数据逻辑 #

所有依赖products的操作，都放到subscribe的回调函数里，确保只有当数据返回后才执行：

products!: IProduct[];

constructor(private dataService: DataService){}

ngOnInit(): void {
  this.dataService.getProducts().subscribe(response => {
    this.products = response;
    console.log("products: ", this.products); // 正常输出数据
    // 这里写所有需要用到products的业务逻辑
  });
}

方案二：正确使用async管道（推荐） #

这是Angular中处理异步数据的最佳实践，无需手动订阅，还能自动避免内存泄漏：

1. 修改组件代码，将products声明为Observable类型：

import { Observable } from 'rxjs';
import { IProduct } from './your-product-interface-path';

products$!: Observable<IProduct[]>; // 用$后缀是Observable变量的约定俗成写法

constructor(private dataService: DataService){}

ngOnInit(): void {
  this.products$ = this.dataService.getProducts(); // 直接赋值Observable，无需手动subscribe
}

2. 在HTML中使用async管道：

<div *ngFor="let item of products$ | async">
  <!-- 示例：展示产品名称 -->
  {{ item.name }}
</div>

方案三：用async/await转换Observable为Promise（适合习惯Promise语法的场景） #

需要将Observable转换为Promise，用firstValueFrom或lastValueFrom（RxJS 7+推荐替代toPromise()）：

import { firstValueFrom } from 'rxjs';
import { IProduct } from './your-product-interface-path';

products!: IProduct[];

constructor(private dataService: DataService){}

async ngOnInit(): void {
  this.products = await firstValueFrom(this.dataService.getProducts());
  console.log("products: ", this.products); // 正常输出数据
}

内容的提问来源于stack exchange，提问作者Илья Никитин