Значение становится нулевым для этого в обратном вызове Promise

Question

Я использую следующее значение кода this, становясь нулевым, когда я его вызываю внутри функции then, вот этот код. Могу ли я сделать что-то неправильно или это так или есть какая-либо работа вокруг, чтобы решить эту проблему

import { Injectable }  from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 

import { Observable }  from 'rxjs/Observable'; 
import { CanActivate, Router } from '@angular/router'; 

import { AuthService }   from '../services/auth.service'; 
import { WebAPISettings }   from '../services/webapisettings.service'; 

@Injectable() 
export class LoginService { 

    //_ngWEBAPISettings: WebAPISettings; 
    //_authService: AuthService; 

    constructor(private http: Http, private ngWEBAPISettings: WebAPISettings, private authService: AuthService) { 
    //this._ngWEBAPISettings = ngWEBAPISettings; 
    //this._authService = authService; 
    } 

    public login(username: string, password: string): Promise<any> { 

    let data = "grant_type=password&username=" + username + "&password=" + password; 
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); 
    let options = new RequestOptions({ headers: headers }); 


    try { 
     debugger; 
     return this.http.post(this.ngWEBAPISettings.apiServiceBaseUri + "token", data, options) 
     .toPromise() 
     .then(function (res: Response) { 
      debugger; 
      let body = res.json(); 
      //let _authService: AuthService = new AuthService(); 

      this.authService.fillAuthDataFromLogin(body); 
      //this.router.navigate(['/Home']); 
      return body.data || {}; 
     }) 
     .catch(this.handleError); 

    } 
    catch (error) { 
     console.log(error); 

    } 

    } 


    private extractData() { 

    } 
    private handleError(error: any) { 
    debugger; 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); // log to console instead 
    return Observable.throw(errMsg); 
    } 


} 

и я ее отладки в хроме вот скриншот, пожалуйста, помогите мне в исправлении.

после использования стрелка функция же проверить снимок экрана

одна вещь, говоря, я использую Angular2 RC4.

Answer 1

Вы можете использовать функцию стрелки, чтобы иметь возможность использовать лексический это:

return this.http.post(this.ngWEBAPISettings.apiServiceBaseUri + "token", data, options) 
    .toPromise() 
    .then((res: Response) => { // <----- 
     (...) 
    }); 

Таким образом, this будет соответствовать экземпляру LoginService службы.

Смотрите этот документ для более подробной информации:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions