約束事の問題を伴う角度2のHttp

Question

私はpromiseで角度2のhttpを使用してログインアプリケーションを作成しようとしています。

issue is before printing the response object in extractData function in service, "Got response" console is printing from login component. 

私の安らかなWebサービスのログインコンポーネントからの応答を得る前に、コードが実行されています。これは初めてサインインボタンをクリックするだけです。 2回目以降は最初に応答が得られ、ログインコンポーネントコードが実行されます。

回答がwebserviceから来るまで待つ方法を教えてください。

が

please find my code below. 

Login component 

import {Component} from '@angular/core'; 
import { Router} from '@angular/router'; 

import {User} from '../model/user'; 
import {UserService} from '../service/user-service'; 

@Component({ 
    selector : 'login-form', 
    templateUrl : 'app/template/login.html', 
    providers : [ 
     UserService 
    ] 
}) 

export class LoginComponent{ 

    user: User; 

    constructor(private userService: UserService,private router: Router){} 

    loginUser(form: any): void { 
     this.userService.loginUser(form.username,form.password).then(user => this.user = user) 
     console.log("Got response"); 
     //console.log(this.user); 
     try { 
      console.log(this.user.userID); 
      console.log(this.user.name); 
      console.log(this.user.mobile); 
      console.log(this.user.email); 
      this.router.navigate(['/']); 
     } 
     catch(err) { 
     } 
    } 
} 

And my service 

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response, RequestOptions } from '@angular/http'; 

import '../rxjs-operators'; 

import {User} from '../model/user'; 

@Injectable() 
export class UserService{ 

    private userUrl = 'http://localhost:8080/khalibottle/user/'; 
    private headers = new Headers({ 'Content-Type': 'application/json' }); 

    constructor(private http:Http){} 

    getUsers(): Promise<User[]> { 
    return this.http.get(this.userUrl + "list") 
        .toPromise() 
        .then(this.extractData) 
        .catch(this.handleError); 
    } 

    loginUser (userName,password): Promise<User> { 
     let body = JSON.stringify({ userName, password }); 
     let options = new RequestOptions({ headers: this.headers }); 
     return this.http.post(this.userUrl + "login",body,options) 
        .toPromise() 
        .then(this.extractData) 
        .catch(this.handleError); 
    } 

    registerUser (name,mobile,email,password,roleID): Promise<string> { 
    let body = JSON.stringify({ name, mobile, email, password, roleID }); 
    let options = new RequestOptions({ headers: this.headers }); 
    return this.http.post(this.userUrl + "register",body,options) 
        .toPromise() 
        .then(this.extractData) 
        .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     console.log(body); 
     return body || { }; 
    } 

    private handleError(error: any) { 
     console.error('An error occurred', error); 
     return Promise.reject(error.message || error); 
    } 
} 

Answer 1

使用矢印機能this

.then((val) => this.extractData(val)) 

代わりの

.then(this.extractData) 

を保持するこれも

.then(this.extractData.bind(this)) 

Answer 2

簡単な作業になります。あなたが待機するコードを取ります執行前それを約束の上で.then()コールの中に入れてください。 .then()（または.catch()など）以外のものはすべて待つことはありません。 2回目以降のクリックで成功したことは、前回のコールの結果を使用するたびに幻影です。このよう

：

それが働いています

loginUser(form: any): void { 
     this.userService.loginUser(form.username, form.password).then(user => { 
      this.user = user; 
      console.log("Got response"); 
      //console.log(this.user); 
      try { 
       console.log(this.user.userID); 
       console.log(this.user.name); 
       console.log(this.user.mobile); 
       console.log(this.user.email); 
       this.router.navigate(['/']); 
      } 
      catch(err) { 
      } 
     }); 
    }