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

Question

我试图在HTTP调用后操纵变量。我想使用.push()或.forEach()这样的函数，但它不允许我，因为数据一开始没有分配给变量。

我在控制台得到一个错误:

无法读取未定义的属性(读取'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函数。因此，当可观察对象返回时，fetchData将被分配data，并继续执行以下逻辑。

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

通常我们使用ngOnInit()进行初始化工作，正如这个问题所讨论的:构造函数和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[];