Angular 2 订阅 http 服务更改？直接方法调用返回过时的结果答案

【问题标题】：Angular 2 subscribe to http service changes? Direct method call returns outdated resultAngular 2 订阅 http 服务更改？直接方法调用返回过时的结果
【发布时间】：2017-03-12 19:07:23
【问题描述】：

我正在从我的身份验证服务调用一个方法，该方法返回用户名和密码是否正确，以及身份验证令牌。当我通过调用 getAuthData 方法获取数据后尝试打印值时，它会打印 authData.status 的默认/无效值 - false。

但是，通过执行 {{authData.status}} 从我的模板视图打印值，它会在提交我的表单后显示正确的值。我试过谷歌搜索、浏览文档，但到目前为止还没有运气。我应该订阅服务更改还是缺少什么？

问题显示在authSubmit()方法@admin.component.ts

admin.module.ts

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';
import { AdminComponent } from './admin.component';
import { AuthService }    from '../shared/auth/index';

@NgModule({
    imports: [CommonModule, FormsModule],
    declarations: [AdminComponent],
    exports: [AdminComponent],
    providers: [AuthService]
})

export class AdminModule { }

auth.service.ts

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';

import 'rxjs/add/observable/throw';

export class AuthData {
    public status: boolean;
    public token:  string;

    public constructor(initStatus: boolean = false, initToken: string = '') {
        this.status = initStatus;
        this.token  = initToken;
    }
}

@Injectable()
export class AuthService {
    public authData: AuthData;

    public constructor(public http: Http) {
      this.authData = new AuthData();
    }

    public getAuthData(user: string, pass: string): Observable<AuthData> {
        return this.http.get('http://api.dev/auth?user=' + user+ '&pass=' + pass)
            .map((res:Response) => res.json())
            .catch((error:any) => Observable.throw(error.json().error || 'Error'));
    }
}

admin.component.ts

import { Component }             from '@angular/core';
import { AuthService, AuthData } from '../shared/index';

@Component({
    moduleId: module.id,
    selector: 'my-admin',
    templateUrl: 'admin.component.html',
    styleUrls: ['admin.component.css']
})

export class AdminComponent {
    public authUser: string;
    public authPass: string;

    public authData: AuthData;

    public constructor(public authService: AuthService) {
        this.authData = this.authService.authData;
    }

    public authSubmit(): boolean {
        this.authService.getAuthData(this.authUser, this.authPass)
        .subscribe(
            data => this.authData = data,
            err  => console.log(err)
        );

        // alert result: authData.status = false | should be: true
        alert('authData.status= ' + authdata.status);

        return false;
    }
}

admin.component.html

  <form *ngIf="!authData.status" (submit)="authSubmit()">
      <input [(ngModel)]="authUser" type="text">
      <input [(ngModel)]="authPass" type="password">

      <button type="submit">Sign In</button>
  </form>

  authData.status = {{authData.status}}

【问题讨论】：

标签： angularjs angular methods typescript service

【解决方案1】：

解决了，这么愚蠢的错误和简单的解决方案。

public authSubmit(): boolean {
    let authStatus: boolean = false;

    this.authService.getAuthData(this.authUser, this.authPass)
    .subscribe(
        data => {
          this.authService.authData = data;
          authStatus = data.status;
        },
        err  => console.log(err)
    );

    alert('authStatus = ' + authStatus);

    return false;
}

【讨论】：