Zwrócenie wartości z funkcji, która subskrybuje Observable

Cześć, temat dotyczy angulara. Spotkałem się pierwszy raz z zagadnieniem, które nie wiem jak ruszyć.

W skrócie - mam pewien komponent, który w pliku html ma pętlę ngFor:

<li *ngFor="let agent of agents">
 <img [src]="getImg(agent)" />
</li 

a w pliku ts:

getImg(agent){
 let response;
 agent.client.subscribe((res) =>
 {
   response = res;
 }
return response;
}

Więc jak widać w ngFor elementy wywołują funkcję getImg, każdy element z własnym parametrem. Problem jaki mam to w jaki sposób zwrócić wartość z tej funkcji getImg w pliku ts? subscribe jako tako żyje własnym życiem, przez co return funkcji getImg jest pusty, a tym samym na widoku nie dostaję odpowiedzi. Jak to ogarnąć? Problem wydaje się w miarę typowy, ale nie spotkałem się prędzej z tym.

No jak sam wiesz wywołanie jest asynchroniczne, więc zwracasz od razu undefined.

Możesz trzymać tablicę typu observable, a w ngOnInit zainicjalizować ją wynikiem pobrania kolekcji zdjęć.

A potem w templacie coś takiego.

<div *ngFor="let agent  of agents; let i = index">
   <img [src]="agentsImgsArray[i] | async" />
</div>

Oczywiście musisz to dostroić do swoich potrzeb.

urke napisał(a):

No jak sam wiesz wywołanie jest asynchroniczne, więc zwracasz od razu undefined.

Możesz trzymać tablicę typu observable, a w ngOniti zainicjalizować ją wynikiem pobrania kolekcji zdjęć.

A potem w templacie coś takiego.

<div *ngFor="let agent  of agents; let i = index">
   <img [src]="agentsImgsArray[i] | async" />
</div>

Oczywiście musisz to dostroić do swoich potrzeb.

Myślałem nad czymś takim, ale nie wiem na ile to jest eleganckie rozwiązanie? No i myślałem, że może da się w jakiś sposób przekształcić tego observabla mojego w taki sposób, żeby zaczął działać synchronicznie :D