Angular2可观察的HTTP数据未填充

Question

我对Angular2还是很陌生，想从JSON文件中加载数据。 我阅读了AngularIO文章并做了本教程，但是我仍然需要一些帮助。 我将“获取数据”分为一个apiService，该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()并顺利通过，但未填充变量i fill status 。 在getStatus() ，变量仍为{} 。 而且， console.log(JSON.stringify(this.status));的输出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调用成功完成后执行。

Answer 2

正确的解决方案是这样的：

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

因此，您必须使用data.status ，因为JSON文件以“ status”开头；）