功能上的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建议的那样。我将可观察对象放在以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 }}

角检查它传递属性的值的表达式test来async。然后，Asycn订阅可观察对象并等待一个值。在下一个检查周期中，Angular将相同的可观察变量传递给Async，并且Async不会进行任何更改，因为它已经订阅了。

在第二个示例中：

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

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