Angular无法将API返回的数据对象存入数组问题求助

架构老林

2026-5-1

问题分析与解决方案

你遇到的核心问题是HTTP请求的异步特性导致的时序错误，我来给你拆解清楚：

为什么当前代码没有输出？

Angular的HttpClient.get()返回的是一个Observable，它的subscribe()回调函数是异步执行的——也就是说，当你调用this.service.GetRacvaPodaci(id).subscribe(...)时，浏览器会先发送HTTP请求，然后立刻跳去执行后面的for循环，这时候this.racvaStat还是初始的空数组[]，自然不会有任何输出。等请求完成、数据真正返回后，subscribe里的this.racvaStat = data才会执行，但这时候循环早就跑完了。

正确的处理方式

你需要把所有依赖异步数据的操作，放到subscribe的回调函数内部，或者用async/await来简化异步代码的写法：

方案1：把操作放在subscribe回调内

这是最直接的方式，确保数据赋值完成后再执行后续逻辑：

public racvaStat: any = [];

getRacvaData(id: number) {
  this.racvaStat = [];
  this.service.GetRacvaPodaci(id).subscribe(data => {
    this.racvaStat = data;
    // 现在数据已经赋值完成，可以正常遍历
    for(let item of this.racvaStat){
      console.log(item.nit_a);
    }
  });
}

方案2：用async/await结合toPromise()（RxJS 6+支持）

如果习惯同步风格的代码，可以把Observable转换成Promise，用async/await来等待数据返回：

public racvaStat: any = [];

async getRacvaData(id: number) {
  this.racvaStat = [];
  // 把Observable转为Promise，等待请求完成
  const data = await this.service.GetRacvaPodaci(id).toPromise();
  this.racvaStat = data;
  // 此时数据已就绪，执行遍历
  for(let item of this.racvaStat){
    console.log(item.nit_a);
  }
}