Ionic Angular Swiping with Service

Question

I'm trying to implement a swiping function where i can use the data of the service. But i doesnt work. It usually works if i'm create my own array in the page.

this is my code so far. I am new to angular and ionic. Am i referencing anything wrong?

export class UswiperPage implements AfterViewInit {
  unternehmen: Unternehmen[];
 
  @ViewChildren('card') card: QueryList<ElementRef>;


  constructor(
    private gestureCtrl: GestureController,
    private zone: NgZone,
    private plt: Platform,
    private unternehmenService: UnternehmenService
  ) {}

  ngAfterViewInit() {
    const cardArray = this.card.toArray();
    this.useTinderSwipe(cardArray);
    this.unternehmen = this.unternehmenService.getAllUnternehmen();
  
    }

I even tried to add console.log in the events to see at what step it is not working. But when i check in the development tool of google chrome it not shown anything.

 useTinderSwipe(cardArray) {
for (let i = 0; i < cardArray.length; i++) {
  const card = cardArray[i];

  const gesture = this.gestureCtrl.create({
    el: card.nativeElement,
    gestureName: "swipe",
    onStart: (ev) => { console.log(card)},
    onMove: (ev) => {
      card.nativeElement.style.transform = `translateX(${
        ev.deltaX
      }px) rotate(${ev.deltaX / 10}deg)`;
      console.log(card)
    },
    onEnd: (ev) => {
      card.nativeElement.style.transition = "1.5s ease-out";

      if (ev.deltaX > 200) {
        card.nativeElement.style.transform = `translateX(${
          +this.plt.width() * 2
        }px) rotate(${ev.deltaX / 2} deg)`;
      } else if (ev.deltaX < -200) {
        card.nativeElement.style.transform = `translateX(-${
          +this.plt.width() * 2
        }px) rotate(${ev.deltaX / 2} deg)`;
        console.log(cardArray)
       
        cardArray.splice(i, 1);
        console.log(cardArray)
        
      } else {
        card.nativeElement.style.transform = "";
      }
    },  
  });
  gesture.enable(true);
}

If i use this kind of array it works:

people = [
{
  name: "ID1",
  img:
    "https://intl-blog.imgix.net/wp-content/uploads/2019/01/shutterstock_437678707.png?auto=format%2Cenhance",

},

{
  name: "ID2",
  img:
    "https://www.startupbw.de/typo3temp/assets/_processed_/f/1/csm_Start-Up_BW_Logo_Facebook_083ee93132.png",
      }, 

];

@ViewChildren(IonCard, { read: ElementRef }) cards: QueryList;

Thanks in advance, Giang