如何枚举Angular 2中从Observable Subscription返回的数据？

Question

我具有有关可观察性工作原理的基本思想，我可以通过调用subscription方法并在模板中呈现数据来获取数据。 但是我无法枚举组件中可观察对象返回的数据。 在将数据发送到模板之前，我想在组件级别对其进行处理。

到目前为止，我已经尝试过了：

我的服务：

getCountries(): Observable<IUser> {
   return this.http.get<IUser>('https://jsonplaceholder.typicode.com/posts');
}

我在组件中的ngInit方法：

 ngOnInit() {
    this.countryService.getCountries().subscribe((users => {
       this.userJson = users;
    }));

    console.log(this.userJson); // Showing undefined

    //giving exception while calling length property
    for (var i = 0; i < this.userJson.length; i++) {
    }
}

不确定如何处理？

Answer 1

您需要在subscribe方法中编写逻辑。 这是一个异步调用，您不知道何时完成。

this.countryService.getCountries().subscribe((users => {
   this.userJson = users;

   console.log(this.userJson);

   for (var i = 0; i < this.userJson.length; i++) {

   }
}));

您仍然可以在标记中使用userJson -Angular将检测this.userJson的值this.userJson更新，并将自动更新UI。

Answer 2

您需要在订阅中调用console.log使其起作用，为什么还要在内部调用？ 因为它是异步请求；您可以通过调用以下函数来遍历项目，

ngOnInit() {
  this.countryService.getCountries().subscribe((users => {
    this.userJson = users;
    console.log(this.userJson); 
    printMe(this.usersJson);
}));

printMe : void (){
  for (var i = 0; i < this.userJson.length; i++) {
  }
}