Kopieren von Antwortdaten von rxJs in Angular2/Typescript

Question

Ich verwende Observable von rxJS in meiner Angular2 mit TypeScript-Anwendung. Ich würde gern eine Kopie der http get Antwortdaten machen.

Service:

getSizes(sku: number): Observable<SizeList[]> { 
     let api = this.host + this.routes.sizes + sku; 
     return this._http.get(api) 
       .map((response: Response) => <SizeList[]>response.json()) 
       .catch(this.handleError); 
} 

Komponente:

getSizes() { 
     this._productService.getSizes(this.productColour) 
       .subscribe(
       sizes => this.sizes = sizes, 
       error => this.errorMessage = <any>error); 
} 

Wie kann ich eine Kopie von this.sizes nehmen? Wenn ich versuche, eine Kopie am Ende meiner Komponenten getSizes() zu erstellen, ist es undefiniert.

Answer 1

Ich denke, dass Ihr Problem mit dem asynchronen Aspekt von Observablen zusammenhängt. Am Ende der getSizes Methode sind die Daten noch da. Sie werden innerhalb der Rückruf abonnieren:

getSizes() { 
    this._productService.getSizes(this.productColour) 
      .subscribe(
      sizes => { 
       this.sizes = sizes; 
       console.log(this.sizes); // <------ 
      }, 
      error => this.errorMessage = <any>error); 
} 

Wenn Sie den Wert aus dem getSizes Methode zurückkehren möchten, müssen Sie eine beobachtbare zurückzukehren und lassen Sie die Methode Anrufer darauf abonnieren:

getSizes() { 
    return this._productService.getSizes(this.productColour) 
      .catch(error => this.errorMessage = <any>error); 
} 

someOtherMethod() { 
    this.getSizes().subscribe(sizes => this.sizes = sizes); 
} 

Answer 2

Dies liegt daran, dass HTTP-Anforderungen asynchron in JS/Angular 2 ausgeführt werden. Daher wird wahrscheinlich die Logik am Ende der getSizes()-Methode ausgeführt, bevor die Methode this._productService.getSizes(...) den Ladevorgang für Ihren Inhalt abgeschlossen hat.

Sie sollten Ihre Logik daher in der subscribe() Methode wie folgt platzieren:

getSizes() { 
     this._productService.getSizes(this.productColour) 
       .subscribe(
       sizes => { 
        this.sizes = sizes 
        // more logic here 
       }, 
       error => this.errorMessage = <any>error); 

     // code here gets executed before the subscribe() method gets called 
}