I have a problem to load an image on a "modal" angular

I want to load some images on a modal, in "mydata" I have 2 images, but it always displays my image 2 in the modal when I click on image 1 and 2.

To try to understand, I have display the mydata.id before my clickable image, it's ok (id 1 with image 1, id 2 with image 2), then I try to display the same Id in the modal but I always have id 2

<div *ngFor="let mydata of Infos.data">

   <div class="col-md-3 col-xs-12">
       {{mydata.id}}<img (click)="show()" src="{{mydata.value}}" alt="user" class="img-responsive" />
   </div>

   <div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h4 class="modal-title" id="myModalLabel">Image {{mydata.id}}</h4> 
               <button type="button" class="btn btn-default" data-dismiss="modal" (click) = "hide()">Close</button>
            </div>
            <div class="modal-body">
               <img src="{{mydata.value}}" id="imagepreview"  >
            </div>
         </div>
      </div>
   </div>
</div>

In my component.ts

showModal: boolean;
show(){
   this.showModal = true; // Show-Hide Modal Check
}
hide(){
   this.showModal = false;
}

Have you got an idea why it's always the last picture is display ?

Thanks a lot