角度Observablesサブスクリプション内からローカル関数変数を変更するonSuccess => {}

Question

私はobservableを購読した後、success関数のコールバックから変数 'success'を変更しようとしています。私はそれのためのテストを書いて、成功したPOSTの真を返すことに失敗した後、Chromeデバッガでデバッグしました。

テストはresponse => {}関数に入りますが、 "success = true"を実行した後もfalseです。他のさまざまな関数でこれをやっているので、他のさまざまな例で見たように、「this」でそれらを参照するために、クラス変数の長いリストを持つ方が好きです。成功を成し遂げる方法はありますか？

public login(username: string, password: string): boolean { 
    let success = false; 

    this.http.post<LoginResponse>('/api/login_check', {username: username, password: password}).subscribe(
    response => { 
     success   = true; 
     this.currentUser = new User(response.user); 
     sessionStorage.setItem('userJWT', response.token); 
    }, 
    error => { 
     console.log('Login failed - ' + error); 
    } 
); 

    return success; 
} 

Answer 1

結果を得るために、同期関数と非同期関数を混在させることはできません。

何かを非同期に呼び出すと、スレッド外で発生するため、非同期呼び出しを待つ必要があります。

応答は、HTTPの前に非同期およびメソッドの戻り値の成功変数であるので、これはそれが例えば

UserServiceの

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

import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class UserService { 
    constructor(private http: Http) { } 

    login(username: string, password: string): Observable { 
     return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password })) 
      .map((response: Response) => { 
       if (response.status === 200) { 
        return response.json(); 
       } 
       else { 
        throw new Error('Bad login!'); 
       } 
      }); 
    } 
} 

、他の場所あなたのコンポーネントで

@Component({ 
    templateUrl: 'login.component.html' 
}) 
export class LoginComponent { 
    login() { 
     this.userService.login(this.model.username, this.model.password) 
      .subscribe(
       data => { 
        this.router.navigate([this.returnUrl]); 
       }, 
       error => { 
        this.alertService.error(error); 
       }); 
    } 
}