Question

我创建了以下组件，这是一个小型演示，因此我在这里使用服务而不是创建单独的服务。

export class AppComponent {    
    @Input() takeInput:string;
    @Output() result;
    constructor( private http: Http) { };

    public onSubmit(value: any){
        this.takeInput = value;

        this.getAll(value.url); //below console.log prints first then the one prints which is written inside this getAll method.

        console.log("this prints first", this.result); //returns undefined
        //How do I use this.result here which gets set once getAll() execution is finished.
    }

以下是调用服务和获取数据的方法：

private getAll (url){
    return this.http.get(url)
        .map((res: Response) => res.json())
        .subscribe((res: Object) => {
            this.result = res;
            console.log("this prints second",this.result); // returns proper response
        });
    }
}

如何等待observable返回数据，然后在我的调用方法onSubmit（）中使用该数据，或者使用this.result作为其他方法的参数继续执行。

Answer 1

您可以重构这样的getAll方法，以便在相应的observable上移出订阅：

private getAll (){
  let url = "https://something";
  return this.http.get(url)
    .map((res: Response) => res.json());
  }
}

并像这样使用它：

public onSubmit(value: any){
  this.takeInput = value.takeInput;
  this.getAll().subscribe(result => {
    console.log(result);
    this.result = result;
    console.log(this.result);
  });
}

如何在angular2中正确使用http服务？

1 个答案: