Question

我正在执行以下代码，无法弄清楚为什么我通过AJAX获取的数据没有被分配给this.users

的类变量

代码段

getUsers() {
     this.http.get('/app/actions.php?method=users')
      .map((res:Response) => res.json())
      .subscribe(
        res => { this.users = res}, // If I console 'res' here it prints as expected
        err => console.error(err),
        () => console.log('done')
    );
    console.log(this.users) // Printing 'undefined'
    return this.users;
  }

任何帮助将不胜感激。这个（http://prntscr.com/cal2l1）链接到我的控制台输出。

Answer 1

这是一个异步调用，因此您不会立即获取数据。但是，如果setTimeout()上的console.log()，它将被正确打印，因为在获取数据后将进行打印：

getUsers() {
    this.http.get('/app/actions.php?method=users')
    .map((res:Response) => res.json())
    .subscribe(
    res => { this.users = res}, // If I console 'res' here it prints as expected
    err => console.error(err),
    () => console.log('done')
);

setTimeout(() => {
console.log(this.users) // Printing 'undefined'
}, 1000);
return this.users;
}

Answer 2

问题原因

嗯，我在这里真的犯了一个愚蠢的错误。因为，在加载DOM之后调用getUsers()所以它在加载DOM之后将值赋给类变量this.users，这限制了我的页面在页面加载阶段加载所需的值（不是页面加载后。）

<强>解决方案

Angular2带有一个名为OnInit或ngOnInit()的钩子。我本来应该在这个事件中调用函数如下。

getUsers() {
     this.http.get('/app/actions.php?method=users')
      .map((res:Response) => res.json())
      .subscribe(
        res => { this.users = res}, 
        err => console.error(err),
        () => console.log('done')
    );
    console.log(this.users)
    return this.users;
  }

ngOnInit() {
    getUsers();
  }

OnInit的文档： https://angular.io/docs/ts/latest/api/core/index/OnInit-class.html

此外，还提供了以下文档作为帮助工具： https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

将AJAX数据分配给AngularJS2中的类变量

2 个答案: