rxjs - Creating a variable inside angular template and assign data from API in template itself

Question

I have a product table with 20 rows. I have to display the product image on each row which I should get from another service. The limitation is the image API takes only one product id at a time to return the image URL. So I have to make 20 API calls to get 20 images.

I am trying to do using the reactive approach and trying to subscribe to the API in the template itself as below

      <div  let-product-data="getProductImage(1234)| async" >
        
          <img  src="{{product-data.image}}">

      </div>

TS Code :

      getProductImage(imageId) {
         const url = `${environment.DEV}/product/stockroomInfo`;
         return this.http.post(url, {id:imageId});
      }
     

But the above code is not working. Can someone help me with what I am making wrong here?

Or this won't work this way? should I go for some other approach. Suggestions, please

question from:https://stackoverflow.com/questions/66068156/creating-a-variable-inside-angular-template-and-assign-data-from-api-in-template

Answer 1

Your approach with using the async pipe inside *ngFor should work fine, however, it looks like your syntax is not quite right.

Instead of let-product-data, try something like this:

  <li *ngFor="let product of products$ | async">
    {{ product.name }}
    <img [src]="getProductImage(product.id) | async">
  </li>

Here's a working StackBlitz