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