Http得不到第一次提交ANGULAR 2的数据

Question

我创建了以下服务：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { User } from '../objects/user';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';


@Injectable()
export class HttpService 
{

  user: User;

  constructor(private _http: Http) 
  { 
    this.user = new User();
  } 

  read(username: string, password: string)
  {
     this._http.get('http://localhost:8080/index.php?username='+username+"&password="+password)
       .map(response => response.json())
       .subscribe(user => this.user = user,
          err=>console.error(err));
  }

  create(url:string, username: string, password: string) : Observable<User>
  {
    return this._http.get(url)
       .map(response => response.json()).catch(this.handleError);
  }

  private handleError(error: any): Observable <any> 
  {
    console.error('An error occurred', error);
    return Observable.create();
  }
}

此组件使用服务：

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../services/http.service';
import { User } from '../objects/user';
import { Router } from '@angular/router';
/**
*   This class represents the lazy loaded LoginComponent.
*/

@Component({
    selector: 'login-cmp',
    templateUrl: 'login.component.html',
  providers:[HttpService]
})
export class LoginComponent //implements OnInit
{
  username: string;
  password: string;
  errorUsername: string;
  errorPassword: string;
  errorStyle: string;
  formSubmitted: boolean;
  isValidUser: boolean;

  constructor(private httpService: HttpService, private router: Router)
  {
    this.isValidUser = false;
    this.formSubmitted = false;
    this.errorStyle = "";
    this.errorUsername = "";
    this.errorPassword = "";
  }

  login()
  {
    this.formSubmitted = true;

    if(this.formSubmitted)
      this.httpService.read(this.username,this.password);

    console.log("login "+this.httpService.user.username+" "+this.httpService.user.password);

    if(this.httpService.user.username == null && this.httpService.user.password == null)
    {
      console.log("Unauthenticated User: 1- "+this.username+" "+this.password);
      this.router.navigateByUrl("/login");
      this.errorStyle = "aler alert-danger";
      this.errorUsername = "Username incorrect";
      this.errorPassword = "Password incorrect";
    }
    else if(this.httpService.user.username === this.username && this.httpService.user.password === this.password)
    {
      console.log("Authenticated User: 2- "+this.httpService.user);
      this.router.navigateByUrl("/dashboard/home");
    }
    else
    {
      console.log("Unauthenticated User: 3- "+this.username+" "+this.password);
      this.router.navigateByUrl("/login");
      this.errorStyle = "aler alert-danger";
      this.errorUsername = "Username incorrect";
      this.errorPassword = "Password incorrect";
    }

  }




}

/ ** /

这是HTML：

<div class="login-page">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="assets/img/SB-admin.png" width="150px" class="user-avatar" />
            <h1>SB Admin BS 4 Angular2</h1>
            <form  role="form" (submit)="login()" validate>
                <div class="form-content">
                    <div class="form-group">
                        <input  required  type="text" name="username" [(ngModel)]="username" class="form-control input-underline input-lg" id="username" placeholder="Email">
                        <div name="error" class="{{errorStyle}}" >{{errorUsername}}</div>
                    </div>

                    <div class="form-group">
                        <input required type="password" name="password" [(ngModel)]="password" class="form-control input-underline input-lg" id="password" placeholder="Password">
                        <div name="error" class="{{errorStyle}}" >{{errorPassword}}</div>
                    </div>
                </div>
                <input type="submit" class="btn rounded-btn" value="login">
                &nbsp;
                <a  class="btn rounded-btn" routerLink="/signup">Register</a>
            </form>
        </div>
    </div>
</div>

问题是当我在重新加载或重新编译文件后第一次提交表单时，我第一次得到未定义的结果。我第二次获得认证用户。就像订阅不起作用，除非你点击2次。我附上了我的控制台结果图片。

Here is the picture of console result