Q:

Put the correct image in the box according to the ID

I have a function that loads certain image data from the database. This data is later loaded into html through * ngFor.
In order to load the image referring to this data I need to get the ID of the function that carries the image information, and then perform the function to get image with that same ID.
I can get the ID and receive all the images, however at the time of preview all the different images are loaded into the boxes but they all have the same image. (If it has 10 images, it will show the 10 to load and will stop at the last) Only the last one is visible in all boxes.
The goal is in each box to fill the image with its ID.
Can anyone help me solve?
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();
    });
  }

A:

Obviously your last image will display as "Images: any " has been assigned values in each iteration of products. So the last product image will be the value of Images after iteration will get completed.
Image and product id as map 
 imagMap: Map<string, string> = new Map<string, string>(); 

 and use them in [src]="imagMap.get(product.id)" 

and in the service of image :-
 ImageInfo(id) {
var self = this;
this.Global.refreshToken().subscribe(function (result) {
  self.homeService.getImage(id).then(function (resultado) {
    if (resultado) {
      self.Images=resultado;
      self.imagMap.set(id,resultado);
    }
  }).catch();
});

}
and this way it will keep track of every individual image being stored

