I am currently working on a function that retrieves image data from a database and displays it in HTML using *ngFor directive.
In order to display the correct image, I need to fetch the ID associated with the image data and use it to retrieve the corresponding image.
Although I am able to retrieve all the IDs and images successfully, when I try to preview them, all the images appear to be the same across different boxes. This means that if there are 10 images, all 10 will be loaded but only the last one will be visible in every box.
The main objective is to display each image in its respective box based on its unique ID.
Would appreciate any assistance in resolving this issue.
My HTML
<div class="row tab-pane Galeria">
<div *ngFor="let product of products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item" (click)="fillModal($event, product)">
<a class="d-block image-block h-100">
<homeImage>
<img *ngIf="Images && Images[product.id] && inView" [src]="Images" class="Images img-fluid" alt="">
</homeImage>
</a>
<div class="ImageText">{{product.name}}</div>
</div>
</div>
</div>
Component.ts
GetProducts() {
let self = this;
this.Global.refreshToken()
.subscribe(function (result) {
self.homeService.getProducts()
.then(function (resultado) {
if (resultado) {
self.products = resultado;
}
})
.then(() => {
if (self.products) {
return Promise.all(self.products.map((product) => self.ImageInfo(product.id)));
}
})
.catch((err) => console.error(err));
});
}
ImageInfo(id) {
var self = this;
this.Global.refreshToken().subscribe(function (result) {
self.homeService.getImage(id).then(function (resultado) {
if (resultado) {
self.Images=resultado;
}
}).catch();
});
}