Angular

Question

我正在尝试在 HTTP 调用后操作一个变量。我想使用 .push() 或 .forEach() 等函数，但它不允许我使用，因为一开始数据没有分配给变量。

我在控制台中收到错误消息：

Cannot read properties of undefined (reading 'forEach')

我的组件：

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

@Component({...})

export class BigQueryComponent implements OnInit {
  fetchedData: any;
  DATA: any;

  constructor(private tableService: TablesService) {
    this.tableService.fetchAPI().subscribe((data) => {
      this.fetchedData = data;
    })
  }

  ngOnInit(): void {
    this.getQueryData();
  }

  getQueryData() {
    this.fetchedData.forEach( dataset => { 
      this.DATA.push( dataset );
    });
  }

}

我的服务：

export class TablesService {

  constructor(private http: HttpClient) {}

  fetchAPI() {
    return this.http.get('https://.../products');
  }
}

我该怎么做？我尝试将 Observable 添加到 HTTP 功能，但我不确定应该如何正确完成。

Answer 1

根据您在评论中的要求，您应该将逻辑从 getQueryData 移至 fetchAPI 的 subscribe 函数。因此，当返回 observable 时，fetchData 将被分配 data 并继续执行以下逻辑。

并从 constructor 中删除 this.tableService.fetchAPI().subscribe 代码。

通常我们使用 ngOnInit() 进行初始化工作，如本问题所述：.

constructor(private tableService: TablesService) { }

getQueryData() {
  this.tableService.fetchAPI().subscribe((data) => {
    this.fetchedData = data;

    this.fetchedData.forEach( dataset => { 
      this.DATA.push( dataset );
    });  
  });
}

注：

会提示这两个变量定义为array类型。

fetchedData: any[];
DATA: any[];

Angular - 无法通过在 HTTP 调用后尝试操作变量来读取未定义的属性（读取 'forEach'）

Angular - Cannot read properties of undefined (reading 'forEach') by trying to manipulate variable after an HTTP call

typescript

http

angular-httpclient