javascript - Αντιγραφή δεδομένων απόκρισης από rxJs σε Angular2/Typescript

Χρησιμοποιώ το Observable από το rxJS στην εφαρμογή μου Angular2 με TypeScript. Θα ήθελα να πάρω ένα αντίγραφο των δεδομένων της απάντησης του http get.

Υπηρεσία :

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

Στοιχείο :

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

Πώς μπορώ να πάρω ένα αντίγραφο αυτού των sizes; Αν προσπαθήσω να πάρω ένα αντίγραφο στο τέλος της συνάρτησής μου getSizes() των components, είναι απροσδιόριστο.

Απάντηση #1

Νομίζω ότι το πρόβλημά σου σχετίζεται με την ασύγχρονη φύση των παρατηρήσιμων. Στο τέλος της μεθόδου getSizes, τα δεδομένα δεν είναι ακόμα διαθέσιμα. Θα είναι διαθέσιμα μέσα στην συνάρτηση αναδρομής του subscribe:

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

Αν θέλετε να επιστρέψετε την τιμή από τη μέθοδο getSizes, πρέπει να επιστρέψετε ένα observable και να αφήσετε τον καλούντα της μεθόδου να κάνει subscribe σε αυτό:

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

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

Απάντηση #2

Αυτό συμβαίνει επειδή τα αιτήματα HTTP γίνονται ασύγχρονα στο JS/Angular 2, οπότε η λογική στο τέλος της μεθόδου σας getSizes() πιθανότατα εκτελείται πριν η μέθοδος this._productService.getSizes(...) ολοκληρώσει τη φόρτωση του περιεχομένου σας.

Θα πρέπει να τοποθετήσετε τη λογική σας επομένως στη μέθοδο subscribe() έτσι:

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
}