使用 `forEach()` 迭代接口数组

时间:2021-05-12 12:14:55

标签: angular typescript interface

我是 Typescript 的新手,我想将 HTTP GET 的响应保存到接口定义的类型数组。

getErrors() {
  return this.http.get<ErrorsInterface[]>(environment.apiUrl+'errors').toPromise()
}

然后我像这样声明数组并调用函数getErrors()

errorsData: ErrorsInterface[]= []

this.errorsData = await this.ErrorsService.getErrors()
this.errorsData.forEach(res => {
 console.log(res.number)
})

但我收到以下错误:

<块引用>

ERROR Error: Uncaught (in promise): TypeError: this.errorsData.forEach 不是函数 TypeError:this.errorsData.forEach 不是函数

感谢您的帮助

2 个答案:

答案 0 :(得分:1)

我不认为有必要在此处将 observable 转换为 promise。你可以用 observable 凑合

服务

getErrors(): Observable<any> {  // <-- return observable
  return this.http.get<ErrorsInterface[]>(environment.apiUrl+'errors');
}

组件

errorsData: ErrorsInterface[]= []

this.ErrorsService.getErrors().subscribe({
  next: (res: any) => {
    this.errorsData = res;
    this.errorsData.forEach(error => {
      console.log(error.number)
    });
  }
  error: (error: any) => {
    // handle error
  }
);

注意:

  1. 您不能将异步获取转换为同步获取。任何依赖于异步数据的语句(如 forEach必须在订阅内。有关异步数据 here 的更多信息。

  2. toPromise() 在 RxJS 7 中是 being deprecated,在 RxJS 中可能会消失

答案 1 :(得分:0)

//in your service file

getErrors():Observable<ErrorInterface[]> {
      return this.http.get<ErrorsInterface[]>(environment.apiUrl+'errors')
  }

 private errorsData= []


getErrors(){
this.ErrorsService.getErrors().Subscribe(res=> 
this.errorsData=res
)
//console.log(this.errorsData.length)
}