http - Angular2 Observable HTTP 数据未填充

Question

我是 Angular2 的新手，想从 JSON 文件加载数据。我阅读了 AngularIO 文章并完成了教程，但我仍然需要一些帮助。我将“获取数据”拆分为一个加载数据的 apiService 和一个从 apiService 获取数据的组件。

因为比较简单，所以对于这个问题我想直接把数据加载到组件中而不用apiService。

这是组件:

export class StatusComponent implements OnInit {

    private status = {};
    private error: string;

   constructor(private router: Router, private variables: Variables, private apiService: ApiService, private http: Http) {
        if (!this.variables.getIsLoggedIn()) {
            this.router.navigate(['login']);
        }
    }

    ngOnInit() {
        this.getStatus();
    }

    getStatus() {
       this.http.get('../app/apiFiles/status.json')
      .map((res:Response) => res.json())
      .subscribe(
        data => { this.status = data},
        err => console.error(err),
        () => console.log('done')
      );
      console.log(JSON.stringify(this.status));
    }
}

这是 JSON:

{
  "status": {
    "timercount": "0",
    "reccount": "0"
   }
}

在组件中，getStatus() 被正确加载，并且没有错误地通过，但是我填充的变量 status 没有被填充。在 getStatus() 之后，变量仍然是 {}。此外，console.log(JSON.stringify(this.status)); 的输出是 {}。

希望有人能帮我解决一下!非常感谢!

Answer 1

那是因为 console.log(JSON.stringify(this.status)); 是在 http 调用完成后执行的。请记住，所有 http 调用都是异步方法。试试这个:

getStatus() {
   this.http.get('../app/apiFiles/status.json')
  .map((res:Response) => res.json())
  .subscribe(
    data => { this.status = data},
    err => console.error(err),
    () => console.log(this.status);
  );
}

您会看到这将打印您的结果，因为 () => console.log(this.status); 在 http 调用成功完成后执行。