Question

我得到了我的json文件，并且正在服务中获取它。然后，我尝试在组件中订阅它，但是在console.log(this.jsonObj)中，我得到了空数组。同样，如果我写console.log(data)-我会得到json数据。

服务：

objUrl = 'assets/jsons/obs.json';
constructor(private http: HttpClient) {
  console.log('Hello ObjectsProvider Provider');
}
getObjectsJson() {
  return this.http.get(this.objUrl);
}

组件：

jsonObj = {};
this.object.getObjectsJson().subscribe((data =>
  this.jsonObj = data
))
console.log(this.jsonObj)

Answer 1

问题

您正在尝试以Asynchronous的方式获取Synchronous数据。您正在将数据console.log(this.jsonObj)记录在Observable之外。因此，它将被执行而无需等待来自API的结果。

修复

只需将日志或您想在subscribe内执行after API的任何代码移动即可。所以你的代码看起来像

jsonObj = [];
this.object.getObjectsJson().subscribe((data =>
  this.jsonObj = data;
  console.log(this.jsonObj);  //<-- data will be appear here.
))

Answer 2

该服务方法是异步的，因此在http调用返回时，subscribe（）内部的代码（进行分配）将在将来的某个时间执行。您的日志语句不在预订范围内，因此它发生在分配之前。尝试在分配之后立即将log语句放入预订中。

Answer 3

console.log（this.jsonObj）将在服务器响应之前运行。您可以按原样使用它。它将完美运行。您可以像这样测试它

<p *ngIf="jsonObj !== undefined">{{jsonObj.field}}</p>

如果要使用console.log进行检查，只需将其添加到这样的订阅中

this.http.getObjectsJson().subscribe((data => {
      this.jsonObj = data
      console.log(this.jsonObj)
    }));"

Angular 2获取json数据并将其定义为组件中的新数组

3 个答案:

问题

修复