Question

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

is

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

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());
}

现在我想要的是将此服务器返回到componentLogin中，因此我必须根据此调用的响应知道该怎么做。但是来自.subscribe的回调似乎无法访问此类的属性。我跟着这个answer 在那里我学到了：

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

最后这是我的登录组件，从user.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;
}

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

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');
        }
    );

我错了什么？我将尝试将结果设置为类变量。为什么我在subscribe回调函数中调用的所有内容似乎都未定义？我会对此表示感谢。感谢。

Answer 1

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

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

var _this = this;

并使用lambda _this的其余部分。这就是为什么调试器不知道lambdas中的任何this.变量。

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

Angular 2 Http Observable订阅回调函数

1 个答案: