Ion-slides loop property doesn't work with ngFor

there is service that i use and the peer object is creating successfuly and shows properly in slider
this is my actual code:

peers:any[] = []

@ViewChild('theSlides' , {  static: false }) slides: IonSlides;
slideOpts = {
loop: true,
    };
this.myService.peer_profile_ready.pipe(
      takeUntil(self.unsubscribe$)
  ).subscribe(
      peer => {
         
          var peer = {
              id: 1,
              firstname: peer.firstname
              lastname: peer.lastName,
              status: peer.status,
              icon: '../../assets/imgs/userIcon/userIcon@3x.png',
              
          }
              this.peers.push(peer)
{)

            

and .html

<ion-slides #theSlides [options]="slideOpts"   id="peerSlide">
        
       <ion-slide *ngFor="let peer of peers;let i = index">
           <img id="{{'x' + i}}" class="peerIcon" [src]="peer.icon"  >
           <p class="peerFirstname">{{peer.firstname}}</p>
           <p class="peerLastname">{{peer.lastname}}</p>
           <p class="peerStatus">{{peer.status}}</p>
         
       </ion-slide>
        </ion-slides>