Javascroptの可変スコープ

Question

javascriptの変数スコープに問題があります。私は、.subscribe(...)ブロックの外に出るとき becames undefinedの値を除いて、うまく動作する次のコードを持っています。私はなぜそれがクラスvaribaleなのか理解していません。ここに私のコードは次のとおりです。

private myUser: User; 

     login(username: string, password: string): User { 

      this.http.get(this.loginUrl + '?username=' + username + '&password=' + password) 
      .map((response : Response) => response.json()) 
      .subscribe(data => { 
       console.log('data inside', data); 
       this.myUser = data; 
       console.log('user inside', this.myUser); 
       } 
      ); 

      console.log('user outside', this.myUser); 

      return this.myUser; 

     } 

そしてここでは、コンソールログからの結果です：

私はbootstrap 4でangular 4を使用しています（私はそれが問題に影響を持っているとは思いません）。 ありがとうございます。

編集 私は下のリンクを赤、私は非同期呼び出しを管理するために、自分のコードにpromiseを追加しようとしました。オンラインチュートリアルは（単純すぎる確かに、Angular公式リファレンスを含む）すべての非常に簡単なようで、私はこのようなものになってしまった：

this.http.get(this.loginUrl + '?username=' + username + '&password=' + password) 
     .toPromise() 
     .then(data => { 
      console.log('data inside', data); 
      this.myUser = data.json() as User; 
      console.log('user inside', this.myUser); 
      }) 
     .catch(console.log.bind('Error!')); 

しかし、それはアプリケーションフローには影響しません。私は努力を続けますが、どんな助けもありがとうございます。

Answer 1

これを変更した場合。

private myUser: User; 

login(username: string, password: string) =() : User => { 

    this.http.get(this.loginUrl + '?username=' + username + '&password=' + password) 
    .map((response : Response) => response.json()) 
    .subscribe(data => { 
    console.log('data inside', data); 
    this.myUser = data; 
    console.log('user inside', this.myUser); 
    } 
); 

    console.log('user outside', this.myUser); 

    return this.myUser; 
} 

ログイン関数の呼び出し側にスコープ付きオブジェクトはありません。 typescriptのarrow関数を使用すると、ローカル変数を使用してthis/instanceを保持し、関数の包含クラスを参照します。

Answer 2

問題は、この行を打ったときに観察が完了していないと、次のとおりです。

console.log('user outside', this.myUser); 

観測は非同期です。サブスクライブブロックは、AJAXコール（this.http.get）が成功した後にのみ実行されます。 console.logステートメントは、オブザーバブルが作成された直後に実行されます。