2017-07-12 18 views
0

こんにちは私はanuglar 2のアプリケーションを持っていて、httpリクエストにobservableを使うのに問題があります。それは一般的にうまく動作します。私はちょうど不思議に思っています、なぜそれが 'これ'のトラックを失うように見えるのですか?ブロックRXJS Angular 2が 'this'なら観測可能なトラックを失う

if (body.token){ 
     this.saveToken(body.token); 
     localStorage.setItem('token', body.token); 
    } 

loginWithEmailAndPassword(email: string, password: string){ 
    let headers = new Headers({ 'Content-Type': 'application/json'}); 
    let options = new RequestOptions({ headers: headers}); 
    return this.http.post('auth/login', {email: email, password: password}, options) 
        .map(this.extractData) 
        .catch(this.handleError) 
} 
private extractData(res: Response) { 
    let body = res.json(); 
    // console.log(body); 
    if (body.token){ 
     this.saveToken(body.token); 
     localStorage.setItem('token', body.token); 
    } 

    return body || {} 
} 
private saveToken(token: string){ 
    localStorage.setItem('token', token); 
} 

私は

user.service.ts:54 TypeError: this.saveToken is not a function 
at MapSubscriber.webpackJsonp.../../../../../src/app/user/user.service.ts.UserService.extractData [as project] (user.service.ts:31) 
at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77) 
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) 
at XMLHttpRequest.onLoad (http.es5.js:1226) 
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) 
at Object.onInvokeTask (core.es5.js:3881) 
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191) 
at XMLHttpRequest.ZoneTask.invoke (zone.js:486) 

エラーを取得し、このパターンを使用して、クラスの他のメソッドを参照するための適切な方法は何ですか。私は非常に我々が

.map(data => this.extractData(data)) 

上記の行のスコープが異なるので、これはあるにvar self = this

答えて

2

変更このライン

.map(this.extractData) 

に戻ることになっている疑い。最初の(元のコード)の内部のthisは関数自体を指し、第2の部分は太い矢印関数を使用してthisが関数の外側の範囲を参照するようにします。

+0

問題が修正される理由を追加してください。 – Skeptor

+0

ありがとう、これで問題は解決しました。 – xerotolerant

+0

@xerotolerant 'handleError'関数内で' this'にアクセスしたい場合は、 '.catch'関数のために同じことをするかもしれません – borislemke

関連する問題