Angular 2 Http mit Versprechen Ausgabe

Question

Ich versuche, eine Login-App mit Winkel 2 http mit Versprechen zu erstellen.

Also bevor ich eine Antwort von meinem erholsamen Webservice bekomme, wird die Login-Komponente unterhalb des Codes ausgeführt. Dies geschieht nur beim ersten Mal, wenn ich auf "Anmelden" klicke. Beim zweiten Mal bekomme ich zuerst die Antwort, dann wird der Login-Komponentencode ausgeführt.

Bitte jemand helfen mir zu warten, bis Antwort von Webservice kommen. Nehmen Sie den Code, den Sie warten wollen:

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

Pfeil Funktion this

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

statt

.then(this.extractData) 

Dies auch

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

Answer 2

Einfach funktionieren würde behalten vor der Ausführung ng, und setzen Sie es in den .then() Aufruf auf das Versprechen. Alles und jedes, was draußen ist .then() (oder .catch(), etc.) wird nie warten. Der Erfolg, den Sie beim zweiten und späteren Klicken sehen, ist eine Illusion, wobei jedes Mal die Ergebnisse des vorherigen Anrufs verwendet werden.

So:

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