2017-07-07 124 views
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]; 
    } 
} 
+0

其實你沒有通過任何URL調用你的方法 – TheUnreal

+0

你的意思是在'(getSiteImage('test.com')'? – KBeckers

回答

2

它不工作的原因是因爲async是得到一個新的觀察到每次角檢查的改變表達。

在您的第一個例子:

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

角檢查它傳遞屬性testasync值表達。 Asycn然後訂閱可觀測值並等待一個值。在下一個檢查週期中,角度通過相同的可觀察到Async,並且Async不作任何更改,因爲它已訂閱。

在您的第二個例子:

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

角檢查它調用創建可觀察到的一個函數的表達式。這被傳遞給等待響應的異步。在下一個週期中,這個重複。每次更改檢測都會創建一個新的可觀察項,異步將無法獲得結果。對於傳遞給async的每個新的observable,它都會退訂到前一個。

+0

任何想法如何解決這個問題?我喜歡使用de URL作爲參數。 – KBeckers

+0

@KBeckers更改該函數,以便它將使用URL作爲關鍵字的對象地圖中的observable存儲,然後下次調用時使用地圖中的值。 – cgTag