分配Angular2中Http訂閱方法返回的值

Question

我在Angular2中調用Web服務時遇到問題。 我的變量this.arc始終為空，因為函數get()是異步的，它在Web服務響應之前直接返回該變量。

我不知道該如何處理。 我看到了一些有關defer信息，但我認為這不是最好的方法。

謝謝 ！

getArcs (lat,lng) {
    var url = "http://localhost:8081/api/v1/arcs?lat="+lat+"&lng="+lng;
    this.arcs = [];

    /*var options = new RequestOptions({
        headers: new Headers({
            'Content-Type': 'application/json;charset=UTF-8'
        })
    });*/

    this.http.get(url)
    .subscribe(
            (data: any) => {
                JSON.parse(data._body).forEach(arc => {
                    //console.log(new Arc(arc));
                    this.arcs.push(new Arc(arc)); //add arcs
                });
                console.log("send");

            },
            error => {
                console.log("error during http request");
            }
        );
    return this.arcs;
}

----編輯----

我認為問題出在函數的調用上：

public getData (lat,lng) {
    var closedArc = this.arcService.getArcs(lat,lng);

    console.log(closedArc);

    //this.showArc(closedArc);
}

Answer 1

由於您確實需要getData()函數中的數據，因此可以在其中移動訂閱邏輯，並讓getArcs()返回一個Observable。 這是一個好習慣-讓服務返回Observable，並在需要數據時訂閱它們。

getArcs(lat, lng) {
  var url = "http://localhost:8081/api/v1/arcs?lat=" + lat + "&lng=" + lng;

  return this.http
    .get(url)
    .map(response => response.json()) // response has builtin method to parse json.
    .map(arc => {
      return new Arc(arc);
    })
}

public getData(lat, lng) {
  var closedArc;
  this.arcService
    .getArcs(lat, lng)
    .subscribe(
      arcs => closedArc = arcs, // success
      error => console.log("error during http request"), // error
      () => this.showArc(closedArc) // complete
    )
}