功能上的角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異步管道

回答

相關問題