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(...)之外（注释为Alternative call place），我将无法从本地组件中读取值。

为什么会这样？是因为变量是在getUsers函数的范围内分配的，还是在后台有关于范围的其他问题？

有人可以详细说明吗？

Answer 1

何时

//Alternative call place

已执行，对getUsers().then(...)的调用尚未发生。

这是异步执行的正常行为传递给then(...)的代码在异步调用的响应到达时执行。 then(...)之后的代码会立即执行。

Angular2范围问题

1 个答案: