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

这是因为在http调用完成后执行了console.log(JSON.stringify(this.status));。请记住，所有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);
  );
}

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

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”开头;）

Angular2 Observable HTTP数据未填充

2 个答案: