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

Question

我正在执行以下代码，无法弄清楚为什么我通过 AJAX 获取的数据没有分配给 class 变量，即 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) 是 link 我的控制台输出。

Answer 1

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

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

问题原因

好吧，我在这里犯了一个愚蠢的错误。因为，getUsers() 在 DOM 加载后被调用，所以它将值分配给 class 变量，在加载 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 中的 class 变量

Assign AJAX data to class variable in AngularJS2

asynchronous

angular-http

angular