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 || { };
  }

然后作為提供者注入組件內部並像這樣訂閱

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

  }

任何人都可以建議我解決這個問題嗎？ 我的服務正在運行，但我訂閱的數據在subscribe方法之外不起作用。 我指出了我遇到問題的地方。 我需要在整個組件中使用this.getSubscribeData作為全局變量。 我不想使用共享服務，這可能不使用其他服務。 工作代碼將有所幫助:)

我必須加載至少7個這樣的變量。 實際上我需要使用這些變量傳遞給d3對象和傳單映射，它必須在一些必要的交互之后。 比方說，我要加載leafletmap這個this.getSubscribeData所以我將啟動內部認購單張地圖。 但如果我想在方法之外使用這個傳單實例，我該怎么辦？

Answer 1

在這段代碼中

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

console.log(this.getSubscribeData)實際上是在 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(...) 。

Answer 2

在這里，我有另一種方式...我使用靜態關鍵字來解決這個問題...

getSubscribeData: any;
getAllvaluesFromFiles() {
this._mapService.loadAdminDataDiv().subscribe(data => {
      this.getSubscribeData = data;
      YOUR_CLASSNAME.setSubscribeData(data);
    },
    error => { console.log(error) },
    () => {
        console.log(this.getSubscribeData);  // prints the data 
      }
    );
}
ngAfterContentInit() {
this.getAllvaluesFromFiles();
 console.log(this.getSubscribeData); // prints Undefined
 console.log(YOUR_CLASSNAME.subscribeData); // prints
}

static subscribeData:any;
static setSubscribeData(data){
   YOUR_CLASSNAME.subscribeData=data;
}

嘗試使用這個...希望這會對你有所幫助