Javascript 函数上的角度2异步管道

我正在尝试从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="">

---

它不起作用的原因是，

async

在每次Angular检查表达式是否有变化时都会得到一个新的可观测值

在您的第一个示例中：

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

Angular检查将属性值

test

传递到

async

的表达式。Asycn然后订阅可观测数据并等待一个值。在下一个检查周期中，Angular将相同的可观测值传递给Async，Async不做任何更改，因为它已经订阅了

在第二个示例中：

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

---

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

实际上，在调用方法时，您没有传递任何URL，您的意思是

（getSiteImage（'test.com'））

？知道如何解决这个问题吗？我喜欢使用de URL作为参数。@KBeckers更改函数，使其使用URL作为键将可观察对象存储在对象映射中，然后下次调用时使用映射中的值。这非常有用，thx。我的CPU一直处于100%状态

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

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