Angular http post第一次不工作，但第二次工作

Question

尝试我的第一次角运动。第一次从http post发送未定义的值，但第二次获得正确的响应（Edge，Firefox）。谢谢！

login服务（电话HTTP POST方法，并返回观察到的）

login(loginRequest: LoginRequest){ 
console.log("LoginService.login - userName " + loginRequest.username); 

let options = new RequestOptions({ headers: headers }); 
return this.http.post(this.http_url, loginRequest, options).map(res =>   
res.json()); 

LoginFormComponent（调用服务类和转换JSON以打字稿对象）

onSubmit() { 
    this.loginSvc.login(this.loginRequest).subscribe(
     data => this.loginResponseStr = data, 
     error => alert(error), 
     () => console.log('Request completed') 
    ); 

    var loginResponse = new LoginResponse(); 
    loginResponse.fillFromJSON(JSON.stringify(this.loginResponseStr)); 
    console.log(loginResponse.status); 
    console.log(loginResponse.statusDesc); 

    if(loginResponse.status == "SUCCESS"){ 
     this.router.navigate(['/home-page']); 
} 

控制台登录

LoginService.login - userName admin main.bundle.js:370:9 
undefined main.bundle.js:266:9 
undefined main.bundle.js:267:9 
Request completed main.bundle.js:263:181 
LoginService.login - userName admin main.bundle.js:370:9 
SUCCESS main.bundle.js:266:9 
VALID USER main.bundle.js:267:9 
Request completed main.bundle.js:263:181 

Answer 1

角服务器调用是异步的，这意味着代码不会等待服务器呃在执行其他代码之前做出回应。比如PHP。所以你不会看到等待服务器发送数据的空白页面。当你想处理来自服务器调用的respose时，你必须添加subscribe中的所有代码;这意味着如果这些信息需要传递给其他服务。 你的代码应该看起来像这样。

onSubmit() { 
 
    this.loginSvc.login(this.loginRequest).subscribe(
 
    data => { 
 
     this.loginResponseStr = data 
 
     var loginResponse = new LoginResponse(); 
 
     loginResponse.fillFromJSON(JSON.stringify(data)); 
 
     console.log(loginResponse.status); 
 
     console.log(loginResponse.statusDesc); 
 

 
     if (loginResponse.status == "SUCCESS") { 
 
     this.router.navigate(['/home-page']); 
 
     } 
 
    }, 
 
    error => alert(error), 
 
    () => console.log('Request completed') 
 
); 
 
}