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对象和传单映射，它必须在一些必要的交互之后。可以说，我必须使用此this.getSubscribeData加载leafletmap，因此我将在订阅中启动传单映射。但如果我想在方法之外使用这个传单实例，我该怎么办？

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

尝试使用此...希望这会对您有所帮助

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

2 个答案: