angularjs - Angular 2 HTTP servis değişikliklerini abone olarak takip etme? Doğrudan metod çağrısı eski sonuç döndürüyor

Kullanıcı adı ve şifrenin doğru olup olmadığını ve ayrıca bir kimlik doğrulama tokeni döndüren kimlik doğrulama servisinden bir yöntem çağırıyorum. getAuthData yöntemini çağırarak veriyi aldıktan sonra değeri yazdırmaya çalıştığımda, authData.status için varsayılan/geçersiz değer olan false yazdırılıyor.

Ancak, şablon görünümümden {{authData.status}} yaparak değeri yazdırdığımda, formumu gönderdikten sonra doğru değeri gösteriyor. Google'da aramayı, dokümantasyonu göz atmayı denedim, ama şu ana kadar hiç başarılı olamadım. Hizmet değişikliklerine abone olmam mı gerekiyor yoksa neyi kaçırıyorum?

Sorun authSubmit() metodunda @admin.component.ts dosyasında gösteriliyor

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}}

Cevap #1

Çözüldü, böyle aptalca bir hata ve basit bir çözüm.

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