Angular2スコープの問題

Question

変数スコープとその変数の値へのアクセスに関する奇妙な問題があります。

import { Component } from '@angular/core'; 
import { HTTP_PROVIDERS } from '@angular/http'; 
import { InputText, DataTable, Button, Dialog, Column, Header, Footer, Panel, ProgressBar, Dropdown, SelectItem, 
SplitButton, SplitButtonItem, Toolbar, SelectButton, OverlayPanel, Checkbox, 
ToggleButton } from 'primeng/primeng'; 
import { User } from './../users.models'; 
import { UsersService } from './../users.service'; 
import { Router, ActivatedRoute }  from '@angular/router'; 
import { BbTile } from "./../../../shared/tile/tile.component"; 
import { BbTileModel } from "./../../../shared/tile/tile.model"; 

@Component({ 
    templateUrl: 'app/pages/users/dashboard/index.html', 
    selector: 'brandbassador-app', 
    // Honestly I'm not sure if all of these are required here 
    directives: [(...), BbTile], 
    providers: [HTTP_PROVIDERS, UsersService] 
}) 

export class UsersDashboardComponent { 
    // Data variables 
    tiles: BbTileModel[] = []; 
    // Statistics variables 
    totalRevenue: number; 
    usersCount: number; 
    averageEngagementRate: number; 
    totalReach: number; 

    ngOnInit() { 
     console.log("INIT "); 

     this.usersService.getUsers().then(
      users => { 
       this.users = users; 
       this.usersCount = this.users.length; 
       this.getTotalRevenue(); 
       this.getAverageEngagementRate(); 
       this.getTotalReach(); 
       this.getMostActive(); 
       this.getTopPerformers(); 

       this.initTiles(); //The function to call 
      }); 

     //Alternative call place 
    } 

    initTiles() { 
     this.tiles.push(
      new BbTileModel("USERS", (this.usersCount).toString()), 
      new BbTileModel("REVENUE", (this.totalRevenue).toString()), 
      new BbTileModel("AVERAGE ENGAGMENT RATE", (this.averageEngagementRate).toString()), 
      new BbTileModel("REACH", (this.totalReach).toString()) 
     ); 
    } 
} 

だから、これはちょうど私のコンポーネントの抜粋です：

は、私は基本的に、この（短いサンプル）の成分を持っています。私のInitTiles関数内からローカル変数にアクセスするのに問題があります。

基本的には、現在の場所（私はThe function to callとコメントされています）で自分の関数呼び出しを呼び出すと、すべて正常に機能します。私はthis.usersService.getUsers().then(...)の外側にその呼を移動する場合

しかし、私は、ローカルコンポーネントから値を読み出す全能力を失う（1 Alternative call placeとしてコメント）。

どうしてですか？変数が関数のスコープ内で割り当てられているか、スコープに関するバックグラウンドで何か別の問題が起きているのでしょうか？

誰でもこの詳細を教えてください。

Answer 1

//Alternative call place 

が実行されると、getUsers().then(...)への呼び出しがまだ実現しませんでした。

これは非同期実行の通常の動作です。
then(...)に渡すコードは、非同期呼び出しからの応答が到着したときに実行されます。 then(...)以降のコードは直ちに実行されます。