javascript - 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 委托(delegate)给这个文件，我在 user.service 中注入(inject)了 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在那里我了解到:

Usually, you take the results from the success callback and assign it to your variable.

最后这是我的登录组件，它从 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 已经提到的，您需要使用 lambda 表达式来访问类属性。

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

var _this = this;

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

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