Angular2中如何枚举Observable订阅返回的数据？

Question

我对 observable 的工作原理有基本的了解，我可以通过调用 subscribe 方法获取数据并在我的模板中呈现数据。但是我无法在我的组件中枚举 observable 返回的数据。我想在将数据发送到我的模板之前在组件级别处理它们。

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

我的服务：

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 的值何时更新，并自动更新 UI。

Answer 2

需要在subscribe里面调用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++) {
  }
}

Angular2中如何枚举Observable订阅返回的数据？

How to enumerate data returned from Observable Subscription in Angular 2?

angular

observable

angular2-services

angularjs-components