带有TypeScript的Angular 2 HTTP GET：订阅后变量为空答案

【问题标题】：Angular 2 HTTP GET with TypeScript: variable empty after subscribe带有TypeScript的Angular 2 HTTP GET：订阅后变量为空
【发布时间】：2023-04-09 02:44:01
【问题描述】：

我正在尝试在服务中调用 HTTP GET 方法，我的问题是我无法正确保存响应。

在我的 app.component.ts 中：

marker: any;
...
this.formService.getMarker()
  .subscribe(( marker: Marker[]) => {
    this.marker = marker;
    console.log(this.marker); // I get output from db 
});
console.log(this.marker); // I get undefined

在我的 app.service.ts 中：

getMarker(){
  return this.http.get('http://localhost:3002/marker')
    .map(res => res.text());
}

如何正确保存 API 调用的响应，以便在组件中使用它？

【问题讨论】：

将getMarker()改成如下getMarker(){ return this.http.get('localhost:3002/marker') .map(res => res.json()); }
我的变量 'marker' 在订阅调用后仍未定义
首先通过console.log查看/marker的响应
在订阅内我使用console.log 获取数据，但在订阅外console.log 显示未定义。如何将响应正确保存在变量中以在其他方法中使用？
this.formService.getMarker() .subscribe(marker => { this.marker = marker; console.log(this.marker); ----> "我得到数据" }) ;控制台.log(this.marker); ------>“我没有定义”

标签： angular typescript http rxjs subscribe

【解决方案1】：

@Component({...})
   class MarkerComponent(){

        marker: any;

        getDataFromServer(){
             let _self = this;
             this.formService.getMarker()
             .subscribe(( marker: Marker[]) => {
                         _self.marker = marker;
                         _self.cotherFunction(); // this run after the response
              });
              this.otherFunction() // this run after request
        }

        otherFunction(){
          console.log(this.marker);
        }
    }

【讨论】：