Angular 2 Http Observable 订阅回调函数

Question

我的 .subscribe 函数有问题。 首先，我有一个向服务器发送请求的功能。就是这样。

protected sendRequest(data:string,url:string):Observable<any>{

    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({ headers: headers });

    //let body = 'email=' + 'email' + '&password=' + 'password';
    return this.http.post(url, data, options).map(response => response.json());
}

现在 user.service 将 sendResquest 委托给这个文件，我已经在 user.service 中注入了 server.service 等等。

public login(email:string, password:string):Observable<any>{
    //format data to send
    let data:string = 'email=' + email + '&password=' + password;
    //let body = 'email=' + 'email' + '&password=' + 'password';

    let serverReturn:Observable<any> = this.sendRequest(data,"server/request/signin.php");
    //Log the server return
    //console.log(serverReturn);

    serverReturn.subscribe(
        //set the token and session elements of a logged user
        function(data){
            //console.log(data);
            //console.log(data.isSigned);
            if(data.isSigned == "true"){
                sessionStorage.setItem("isSigned","true");
                sessionStorage.setItem("userToken", data.userToken);
            } else if(data.userBlocked == "true"){
                sessionStorage.setItem("isSigned", "false");
            } else {
                sessionStorage.setItem("isSigned", "false");
            }
        }
    );
    return serverReturn;
}

现在我想要的是在 componentLogin 中获取这个 serverReturn，所以我必须知道根据这个调用的响应要做什么。 但是来自 .subscribe 的回调似乎无法访问此类的属性。 我正在关注这个answer 在那里我了解到：

通常，您从成功回调中获取结果并将其分配给您的变量。

最后这是我的登录组件，它从 user.service 调用登录

import { Component, ElementRef, ViewChild } from '@angular/core';
import { ModalComponent } from '../../ui/modal/modal.component';

import { UserService } from '../../utils/user.service';

@Component({
selector: 'login',
templateUrl: 'app/system/login/tpl.html',
styleUrls: ['app/system/login/style.css'],
directives: [ModalComponent],
providers: [UserService]
})
export class LoginComponent {
constructor(private userService:UserService, private elementRef:ElementRef){

}
private result:Array<any>;
@ViewChild(ModalComponent) modal:ModalComponent;
private signin():void{

    let email:string =  this.elementRef.nativeElement.querySelector("#email").value;
    let password:string = this.elementRef.nativeElement.querySelector("#password").value;

    this.userService.login(email, password).subscribe(data => this.result = data);
    console.log(this.result);

    //this.modal.showModal('Login ','Login');
}
}

问题是我尝试在成功回调中执行的任何变量或更改都会得到未定义的返回。如果我调用一个方法，订阅中的任何方法也会给我一个错误。 例如，如果我尝试这样做。

this.userService.login(email, password).subscribe(
        function(data){
            this.modal.showModal('Login ','Login');
        }
    );

我收到一个错误：

EXCEPTION: TypeError: Cannot read property 'showModal' of undefined

我做错了什么？我将尝试将结果设置为类变量。为什么我在订阅回调函数中调用的所有内容似乎都未定义？ 我会很感激这方面的任何帮助。谢谢。

Answer 1

正如 Jason Goemaat 已经提到的，您需要使用 lambdas 来访问类属性。

在调试器中看不到它们的原因是在转译代码中this 被分配给_this。 你会看到一行

var _this = this;

其余的 lambda _this 被使用。这就是调试器不知道 lambda 中的任何 this. 变量的原因。

以 WebStorm 为例。该 IDE 附带一个调试器，该调试器可以识别该问题并自动对其进行补偿。但是，它仅适用于 chrome，因为它依赖于 chrome 插件。