Angular 2 async pipe auf eine Funktion

Question

Ich versuche, eine Base64 von einem API zu bekommen. Der folgende Code funktioniert einwandfrei.

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

Aber ich möchte lieber eine Funktion verwenden. Wenn ich den Code der folgenden ändern:

getSiteImage(url) { 
    return this.CustomerService.getCustomerSiteImage(url).share(); 
} 


<img class="avatar avatar-xl" src="{{ (getSiteImage('test.com') | async)?.image }}" alt=""> 

Ich mag wissen, warum dies nicht funktioniert, und wie kann ich dies richtig erreichen kann.

--------- EDIT:

Menschen in der Zukunft mit dem gleichen Problem zu helfen. So wie @thinkinkingmedia vorgeschlagen. Ich lege die Observablen in ein Objekt mit der URL als Schlüssel.

änderte ich die getSiteImage (url) Methode an:

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

Der Grund, es nicht funktioniert, weil async ist eine neue beobachtbaren jedes Mal Angular prüft der Ausdruck für eine Änderung bekommen.

In Ihrem ersten Beispiel:

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

Angular prüft den Ausdruck, der den Wert der Eigenschaft test-async passiert. Asycn abonniert dann das Observable und wartet auf einen Wert. Im nächsten Zyklus der Überprüfung von Angular übergibt die gleiche beobachtbar an Async, und Async nimmt keine Änderungen vor, da es bereits abonniert ist.

In Ihrem zweiten Beispiel:

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

Angular prüft der Ausdruck, der eine Funktion aufruft, die eine beobachtbare schafft. Dies wird an async übergeben, der auf eine Antwort wartet. Im nächsten Zyklus wird dies wiederholt. Jede Änderungserkennung erzeugt ein neues Observable und das Async erhält nie die Chance, ein Ergebnis zu erzielen. Für jedes neue Observable, das an async übergeben wird, kündigt es das vorherige ab.