在 RxJs 订阅后，来自服务的 Angular 2 返回数据不可用

Question

在我的 map.service 中，我这样编码

loadAdminDataDiv (): Observable<any> {
     return this.http.get("static/data/data.json")
                      .map(this.extractData);
  }
private extractData(res) {

      if (res.status < 200 || res.status >= 300) {
        throw new Error('Bad response status: ' + res.status);
      }

      //console.log(res.json());
      this.serviceData =(res.json()) ;
      return this.serviceData || { };
  }

然后作为提供者注入(inject)到组件中并像这样订阅

getSubscribeData: any;
getAllvaluesFromFiles() {
    this._mapService.loadAdminDataDiv().subscribe(data => {
      this.getSubscribeData = data;

    },
      error => { console.log(error) },
      () => {
        console.log(this.getSubscribeData);  // prints the data 

      }
    );
  }

ngAfterContentInit() {
    this.getAllvaluesFromFiles();
    console.log(this.getSubscribeData); // prints Undefined

  }

谁能建议我解决这个问题？我的服务正在运行，但我订阅的数据在订阅方法之外不起作用。我指出了我遇到问题的地方。我需要在整个组件中将此 this.getSubscribeData 作为全局变量使用。我不想使用共享服务，是否可以不使用其他服务。一个工作代码会很有帮助:)

而且我必须加载至少 7 个这样的变量。实际上，我需要使用这些变量传递给 d3 对象并传递到传单映射中，并且必须在进行一些必要的交互之后进行。比方说，我必须使用此 this.getSubscribeData 加载传单 map ，因此我将在订阅内启动传单 map 。但是如果我想在方法之外使用这个传单实例，我应该怎么做？

Answer 1

在这段代码中

  ngAfterContentInit() {
    this.getAllvaluesFromFiles();
    console.log(this.getSubscribeData); // prints Undefined
  }

console.log(this.getSubscribeData)其实是before subscribe

subscribe() 安排异步调用 Http 在当前同步线程执行完成时进行。
然后你的 console.log(...) 被执行。
当服务器的响应最终到达时，您传递给subscribe(...) 的回调将被执行。

为了能够在响应到达时执行一些代码，您可以使用例如

  getAllvaluesFromFiles() {
    return this._mapService.loadAdminDataDiv()
    .do(data => {
      this.getSubscribeData = data;
    })
    .do(() => {
        console.log(this.getSubscribeData);  // prints the data 
    })
    .catch(error => { 
        console.log(error);
        throw error;
    });
  }

这样会返回一个Observable

  ngAfterContentInit() {
    this.getAllvaluesFromFiles()
    .subscribe(data => {
      console.log(this.getSubscribeData); 
    })
  }

通过这种方式正确链接调用，以便在数据可用后执行 console.log(...)。