Question

我有一个angular2组件，其中有一个方法可以通过调用服务方法从API调用中填充数据。

getData() {
  this.someBinding = "Initial value";
  this.someService.get('some url').then(() => {
    this.someBinding = "Updated Value";
   }
  ).catch(//error handling)
}

我在 ngOnInit（）生命周期钩子中调用getData（）方法，如下所示：

ngOnInit(){
  this.getData();
}

问题是，在API调用完成后，内部视图{{someBinding}}未更新。我在API调用中正确获取数据，但绑定未更新。

在数据到达getData（）。then（）之后，我找到了手动触发变化检测（ this.cdr.detectChanges（））的解决方案，该工作正常。

我无法确定此情况下的问题，为什么我需要手动触发更改检测。我没有找到原因，但解决方案工作正常。请解释。

Answer 1

您不需要将observable转换为promise，最好直接使用observable。

服务：

getData(): Observable<Something> {
  return this.http.get(...)
}

成分：

ngOnInit() {
  this.someBinding = this.service.getData();
}

组件模板：

{{ someBinding | async }}

Angular可以使用async直接在视图中呈现可观察对象。它还会在组件被销毁时自动取消订阅。最好坚持使用Obularable API，因为它在整个Angular应用程序中使用

API调用后，Angular 2视图未更新

1 个答案: