2016-08-17 116 views
1

我有一個奇怪的問題,關於變量範圍和訪問這些變量的值。Angular2範圍問題

我基本上這樣(短樣品)成分:

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(...)之外(一個註釋爲Alternative call place),我將失去從本地組件讀取值的所有能力。

這是怎麼發生的?是因爲變量是在函數的範圍內分配的,還是在後臺有關於範圍的其他問題?

任何人都可以詳細說明這個嗎?

回答

2

當執行

//Alternative call place 

,調用getUsers().then(...)還不發生。

這是異步執行的正常行爲。
您傳遞給then(...)的代碼在異步呼叫的響應到達時執行。 then(...)之後的代碼立即執行。

+0

好的,所以我的錯誤是,我期待數據在那裏還沒有實際存在。我認爲這將是一些喜歡的東西。所以我可以在'then(...)'之後說'我可以添加另一個'then()'來調用/初始化TileModel? –

+0

你可以這樣做,但是當你可以將代碼移動到你已有的'then(...)'中時,添加另一個'then(...)'有什麼意義呢? –

+1

除了強迫症之外沒有別的原因:D –