Angular 2 个函数上的异步管道

Question

我正在尝试从 api 中获取 base64。以下代码工作正常。

private test = null;

ngOnInit() {
   this.loadCustomers();
   this.test = this.getSiteImage();
}

getSiteImage() {
   return this.CustomerService.getCustomerSiteImage('test.com').share();
}

<img class="avatar avatar-xl" src="{{ (test | async)?.image }}" alt="">

但我更愿意使用函数。当我将代码更改为以下内容时：

getSiteImage(url) {
    return this.CustomerService.getCustomerSiteImage(url).share();
}


<img class="avatar avatar-xl" src="{{ (getSiteImage('test.com') | async)?.image }}" alt="">

我想知道为什么这不起作用以及我如何正确地实现它。

------------编辑：

帮助以后遇到同样问题的人。正如@thinkinkingmedia 所建议的那样。我将 observables 放在一个以 url 作为键的对象中。

我将 getSiteImage(url) 方法更改为：

getSiteImage(url) {
    if (url in this.imageObservables) {
      return this.imageObservables[url];
    } else {
      this.imageObservables[url] = this.CustomerService.getCustomerSiteImage(url).share();
      return this.imageObservables[url];
    }
}

Answer 1

它不起作用的原因是因为 async 每次 Angular 检查表达式的变化时都会得到一个新的可观察值。

在你的第一个例子中：

{{ (test | async)?.image }}

Angular 检查将属性 test 的值传递给 async 的表达式。然后 Asycn 订阅 observable 并等待一个值。在下一个检查周期中 Angular 将 same observable 传递给 Async，并且 Async 不做任何更改，因为它已经订阅了。

在你的第二个例子中：

{{ (getSiteImage('test.com') | async)?.image }}

Angular 检查调用创建可观察对象的函数的表达式。这被传递给等待响应的异步。在下一个周期中，这会重复。每次更改检测都会创建一个新的可观察对象，并且异步永远不会有机会产生结果。对于传递给 async 的每个新可观察对象，它都会取消订阅前一个。

Angular 2 个函数上的异步管道

Angular 2 async pipe on a function

javascript

angular

observable

pipes-filters