角度のあるhttpポストは初めて動作しませんが、2回目に動作します

Question

初めての角運動を試してみます。 http投稿から1回目に未定義の値を受信しましたが、2回目は適切な応答を得ました（Edge、Firefox）。ありがとう！

LoginService（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

角度を記録サーバコールは非同期であるため、コードがservを待つことはありません残りのコードを実行する前に応答する必要があります。 PHPなど。したがって、サーバーがデータを送信するのを待っている空白のページは表示されません。サーバーコールからの再割り当てに対処する場合は、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') 
 
); 
 
}