2016-05-13 7 views
5

Ich bin neu bei Angular 2 und Observables, also entschuldige ich mich, wenn mein Problem trivial ist. Jedenfalls versuche ich den Angular 2 HTTP Client mit RxJS zu testen. Obwohl ich es zum Laufen gebracht habe, muss ich dem Dienst, an dem ich gerade arbeite, mehr Logik hinzufügen. Grundsätzlich würde ich gerne eine Mapping-Funktion haben, um das Objekt, das ich von dem Web-Service, mit dem ich verbunden bin, zu erhalten, zu dem Modellobjekt, das ich in Angular habe, zu konvertieren.Angular2 RxJS Aufruf der Klassenfunktion von der Kartenfunktion

Dies ist der Code, das funktioniert:

import { Injectable } from 'angular2/core'; 
import { Http, Response } from 'angular2/http'; 
import { Observable } from 'rxjs/Observable'; 

import { Person } from '../models/person'; 

@Injectable() 
export class PersonsService { 

    constructor(private http: Http) { } 

    private personsUrl = 'http://localhost/api/persons'; 

    getPersons(): Observable<Person[]> { 
     return this.http.get(this.personsUrl) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     if(res.status < 200 || res.status >= 300) { 
      throw new Error('Bad response status ' + res.status); 
     } 

     let body = res.json(); 
     return body.data || {}; 
    } 

    private handleError(error: any) { 
     let errMsg = error.message; 
     return Observable.throw(errMsg); 
    } 
} 

Mit dem obigen Code, den ich überhaupt keine Probleme haben. Das Problem, das ich habe, ist, dass ich das Objekt, das ich von dem Dienst bekomme, demjenigen zuordnen möchte, den ich in Angular habe, d. H. Person. Was ich versuchte, ist, eine andere Funktion von der Funktion extractData aufzurufen, die von der Funktion .map verwendet wird.

private extractData(res: Response) { 
    if(res.status < 200 || res.status >= 300) { 
     throw new Error('Bad response status ' + res.status); 
    } 

    let body = res.json(); 
    // map data function 
    var data = this.mapData(body.data); 

    return data || {}; 
} 

private mapData(data: any) { 
    // code to map data 
} 

Offensichtlich ist der Code wie oben funktioniert nicht, wenn this innerhalb der Funktion extractData Bezug genommen wird, ist this nicht auf die PersonsService Klasse beziehen, aber es bezieht sich auf ein MapSubscriber Objekt.

Ich weiß nicht, ob es möglich ist, eine "externe" Funktion aufzurufen. Es könnte eine dumme Sache sein, aber ich kann keine Informationen darüber finden.

Antwort

17

Anstatt nur das Bestehen der function Referenz Verwendung arrow Funktionen this

.map((res) => this.extractData(res)) 
+0

Perfect! Vielen Dank :) Könnten Sie bitte die Gründe dafür erklären? –

+2

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions ohne 'this' zeigt auf die Funktion, bei der der Anruf getätigt wird. –

+0

Ich zog mir die Haare aus. Vielen Dank! –

2

Eigentlich Karte Funktion des beobachtbaren beibehalten können Sie sich auf eine Referenzgröße als zweites Argument übergeben, wie sollte this innerhalb der höheren Ordnung tatsächlich funktionieren Funktion.
so die Lösung ist
.map(this.extractData,this)
Auf diese Weise, während die Funktion extractData vorbei Sie auch die der aktuellen Klasse this Ausführungskontext auf die Funktion höherer Ordnung sind vorbei. Es wird funktionieren.

Observable Doc Reference Link

screenshot of the doc

Verwandte Themen