视图角度2中的值未更新

Question

我的应用程序有这个组件

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router'
//import '../../public/css/styles.css';

import {CategoryComponent} from './category.component';
import {ProductComponent} from './product.component';
import {HomeComponent} from './home.component';
import {BuyProductComponent} from './buyproduct.component';
import {CartComponent} from './cart.component';
import {LoginComponent} from './login.component';
import {RegisterComponent} from './register.component';
import {FolderComponent} from './folder.component';

import { AuthService }         from '../services/auth.service';



@Component({
  selector: 'my-app',
  templateUrl: '../views/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  //it's bcoz of this error Component not found in precompile array.
  precompile: [CategoryComponent,
    ProductComponent,
    HomeComponent,
    BuyProductComponent,
    CartComponent,
    LoginComponent,
    RegisterComponent,
    FolderComponent
  ]
})

export class AppComponent {
  auth: any = {};
  constructor(private authService: AuthService) {
    this.auth = authService.auth;
    console.log("from app component " + authService.auth.isLoggedIn);
  }
  title = "App Component";
}

这是组件的视图

<!--<img src="../../public/images/angular.png">-->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      <span class="navbar-brand"> </span>
    </div>
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a [routerLink]="['/Home']">Home</a></li>
        <li *ngIf="auth.isLoggedIn && auth.isAdmin"><a [routerLink]="['/Category']">Category</a></li>
        <li *ngIf="auth.isLoggedIn && auth.isAdmin"><a [routerLink]="['/Products']">Product</a></li>
        <li *ngIf="auth.isLoggedIn && !auth.isAdmin"><a [routerLink]="['/BuyProduct']">Buy Products</a></li>
        <li *ngIf="auth.isLoggedIn && !auth.isAdmin"><a [routerLink]="['/Cart']"><i class="fa fa-shopping-cart"></i><span class="badge" >11</span></a></li>
        <!--<li *ngIf="isLoggedIn"><a [routerLink]="['/Folder']"><i class="fa fa-shopping-cart"></i><span class="badge" >Folder</span></a></li>-->
      </ul>
      <ul class="nav navbar-nav navbar-right" *ngIf="!auth.isLoggedIn">
        <!--<li><a href="#">{{isLoggedIn}} b</a></li>-->
        <li><a [routerLink]="['/Register']">Register</a></li>
        <li><a [routerLink]="['/Login']">Login</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right" *ngIf="auth.isLoggedIn">
        <!--<li><a href="#">{{isLoggedIn}} a</a></li>-->
        <li><a [routerLink]="['/Home']">Welcome {{auth.userName}}</a></li>
        <li><a [routerLink]="['/Login']">Log Out</a></li>
      </ul>

    </div>
  </div>
</div>
<div class="container ">
    <router-outlet></router-outlet>
  <hr />
  <footer>
    <p>&copy; My ASP.NET Application</p>
  </footer>
</div>

我正在使用此服务通过调用fillAuthDataFromLogin来填充数据，但在调用服务后，屏幕上没有任何内容更新

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';



@Injectable()
export class AuthService {
  //isLoggedIn: boolean = true;
  //auth: Authentication={};
  auth: any = {};
  _router:any;
  constructor() {
    //debugger;
    //this._router=router
    this.auth.isLoggedIn = false;
    this.auth.userName = "";
    this.auth.isAdmin = false;
    this.auth.access_token = "";
    this.auth.token_type = "";
  }

   fillAuthDataFromLogin=(response: any)=> {
    //debugger;
    this.auth.isLoggedIn = true;
    this.auth.userName = response.userName;
    this.auth.isAdmin = response.IsAdmin;
    this.auth.access_token = response.access_token;
    this.auth.token_type = response.token_type;
    //this.router.navigate(['/Home']);
  };


  login() {
    //return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
    return this.auth.isLoggedIn;
  }

  logout() {
    this.auth.isLoggedIn = false;
  }
}

我做错了什么？ 从

调用的服务代码fillAuthDataFromLogin

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

import { Observable }     from 'rxjs/Observable';
import { CanActivate, Router } from '@angular/router';

import { AuthService }         from '../services/auth.service';
import { WebAPISettings }         from '../services/webapisettings.service';

@Injectable()
export class LoginService {

  //_ngWEBAPISettings: WebAPISettings;
  //_authService: AuthService;

  constructor(private http: Http, private ngWEBAPISettings: WebAPISettings, private authService: AuthService,private router:Router) {
    //this._ngWEBAPISettings = ngWEBAPISettings;
    //this._authService = authService;
  }

  public login(username: string, password: string): Promise<any> {

    let data = "grant_type=password&username=" + username + "&password=" + password;
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({ headers: headers });


    try {
      debugger;
      return this.http.post(this.ngWEBAPISettings.apiServiceBaseUri + "token", data, options)
        .toPromise()
        .then( (res: Response) => {
          debugger;
          let body = res.json();
          this.authService.fillAuthDataFromLogin(body);
          this.router.navigate(['/Home']);
          return body.data || {};
        })
        .catch(this.handleError);

    }
    catch (error) {
      console.log(error);

    }

  }


  private extractData() {

  }
  private handleError(error: any) {
    debugger;
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }


}