ion-gesture not working with Firebase data?

hello there.

i have an issue with my ionic app, i added in my project the ion-gesture but because of the ngFor="" from the firebase data, the cards are not able to move

there is my code :

<ion-card *ngFor="let postscall2 of postcall2" >
    
      <img class="profilePic"src="https://ucarecdn.com/{{ postscall2.profilePic }}/-/scale_crop/200x200/center/"/>
      <ion-img (click)="open(postscall2)"src="https://ucarecdn.com/{{postscall2.postboost2ID}}/-/preview/{{postscall2.effect}}"></ion-img>
     
        
      
    </ion-card>

and there is the typescript part

import { Component, ElementRef, OnInit, QueryList, AfterViewInit, ViewChildren }from'@angular/core';
    import { AngularFirestore, AngularFirestoreDocument } from "@angular/fire/firestore";
    import { AngularFireFunctions} from '@angular/fire/functions'
    import { firestore } from 'firebase/app';
    import * as firebase from 'firebase/app';
import { IonCard  } from '@ionic/angular'

@Component({
  selector: 'app-feed',
  templateUrl: './feed.page.html',
  styleUrls: ['./feed.page.scss'],
})
export class FeedPage implements OnInit, AfterViewInit {
@ViewChildren(IonCard, { read: ElementRef }) cards: QueryList<ElementRef>;
sub
 postcall

 constructor(  
    private aff:AngularFireFunctions,
    public afstore: AngularFirestore,
    private afs: AngularFirestore, 
    private gestureCtrl: GestureController,
   ) {}

 
ngOnDestroy() {
    this.sub.unsubscribe()
}

  
  
 
  ngOnInit() {
   

 const postcall2 = this.aff.httpsCallable('postscall2')
  this.sub = postcall2({}).subscribe(data =>{
    this.postcall2 = data
    
    console.log("postcall2");
    console.log(this.postcall2);
  } )



 ngAfterViewInit(){

    const cardArray = this.cards.toArray()
    this.useLonpress(cardArray)
  }


 useTinderSwipe(cardArray) {
       for (let i = 0; i < cardArray.length; i++){
         const card = cardArray[i];
         console.log('card', card)
         const gesture = this.gestureCtrl.create({
           el: card.nativeElement,
           gestureName: 'swipe',
           onStart: ev => {

           },
           onMove: ev => {
            
            card.nativeElement.style.transform = `translateX(${ev.deltaX}px) rotate(${ev.deltaX / 10}deg)`;

           },
           onEnd: ev => {
           card.nativeElement.style.transition = '3.5 ease-out';
             if(ev.deltaX > 175){
              card.nativeElement.style.transform = '';
             console.log("do something")
             this.presentToast()

             }else if (ev.deltaX < -175) {
              card.nativeElement.style.transform = '';
              console.log("do something else")
              this.presentToast1()

             }else{
               card.nativeElement.style.transform = '';
               
             }
           }
         });
         gesture.enable(true)
       }
     }

}

hope someone knows what i need to change. and remember to up vote ,the post may help other coder who have the same error thank you in advance