功能上的角2异步管道

我想从api中获取base64。以下代码正常工作。功能上的角2异步管道

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="">

我想知道这是为什么没有工作，我怎么能正确地做到这一点。

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

帮助未来同样的问题的人。就像@thinkinginkingmedia建议的一样。我把观察对象放在一个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]; 
    } 
}

来源

2017-07-07 KBeckers

其实你没有通过任何URL调用你的方法 – TheUnreal

你的意思是在'（getSiteImage（'test.com'）'？ – KBeckers

它不工作的原因是因为async是得到一个新的观察到每次角检查的改变表达。

在您的第一个例子：

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

角检查它传递属性test到async值表达。 Asycn然后订阅可观测值并等待一个值。在下一个检查周期中，角度通过相同的可观察到Async，并且Async不作任何更改，因为它已订阅。

在您的第二个例子：

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

角检查它调用创建可观察到的一个函数的表达式。这被传递给等待响应的异步。在下一个周期中，这个重复。每次更改检测都会创建一个新的可观察项，异步将无法获得结果。对于传递给async的每个新的observable，它都会退订到前一个。

来源

2017-07-07 14:52:47 cgTag

任何想法如何解决这个问题？我喜欢使用de URL作为参数。 – KBeckers

@KBeckers更改该函数，以便它将使用URL作为关键字的对象地图中的observable存储，然后下次调用时使用地图中的值。 – cgTag

功能上的角2异步管道

回答

相关问题