Angular HTTP请求后操作变量报reading 'forEach' of undefined错误如何处理

• Angular 的 HttpClient 发起的 HTTP 请求是异步操作，subscribe 的回调函数仅会在接口响应成功返回后执行。你在 constructor 中发起请求后，代码会同步向下执行，ngOnInit 触发 getQueryData 方法时，接口还未返回结果，this.fetchedData 尚未被赋值，默认值为 undefined，调用 forEach 方法自然触发 Cannot read properties of undefined (reading 'forEach') 报错。
• 你的 DATA 变量没有初始化默认值，就算 fetchedData 有值，调用 push 方法也会因为 DATA 是 undefined 触发同类报错。

核心逻辑是等接口返回数据后再执行数据处理操作，同时做好变量初始化兜底，优化后代码如下：

修正后的组件代码 #

import {Component, OnInit, OnDestroy} from '@angular/core';
import {TablesService} from "../tables.service";
import {Subject, takeUntil} from "rxjs";

@Component({...})
export class BigQueryComponent implements OnInit, OnDestroy {
  // 初始化默认值为空数组，兜底避免未赋值时调用方法报错
  fetchedData: any[] = [];
  DATA: any[] = [];
  // 用于组件销毁时取消订阅，避免内存泄漏
  private destroy$ = new Subject<void>();

  constructor(private tableService: TablesService) {}

  ngOnInit(): void {
    // 业务请求逻辑建议放到 ngOnInit 中执行，constructor 仅做依赖注入
    this.tableService.fetchAPI()
      .pipe(takeUntil(this.destroy$))
      .subscribe((data) => {
        this.fetchedData = data;
        // 接口返回数据后，再调用数据处理方法
        this.getQueryData();
      })
  }

  getQueryData() {
    this.fetchedData.forEach( dataset => { 
      this.DATA.push( dataset );
    });
    // 如果你只是要完整拷贝数组，上述逻辑可以简化为：
    // this.DATA = [...this.fetchedData]
  }

  ngOnDestroy(): void {
    // 组件销毁时终止订阅，清理内存
    this.destroy$.next();
    this.destroy$.complete();
  }
}

服务代码（无需修改，仅建议补充类型定义增强可维护性） #

import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";

export class TablesService {
  constructor(private http: HttpClient) {}

  // 补充返回值类型定义，更符合TypeScript规范
  fetchAPI(): Observable<any[]> {
    return this.http.get<any[]>('https://.../products');
  }
}

内容的提问来源于stack exchange，提问作者Rihards Ādminis