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

Upvotes: 1

Answers (2)

thar

Reputation: 11

I've run into the same problem and have found out that for dynamically (e.g. from Firebase) loaded elements it is too early to use ngAfterViewInit() because the data is not yet ready there.

Move the code from ngAfterViewInit() to ngAfterViewChecked() and everything should be working flawlessly.

Upvotes: 1

saqib kafeel

Reputation: 306

Change your template:

<ion-img class="map" [src]="picToView" (click)="changeView()"></ion-img>

And declare a variable in the class:

picToView:string="https://ucarecdn.com/{{postscall2.postboost2ID}}/-/preview/{{postscall2.effect}}";  // always instatiate with a valid value

And changeView:

changeView(){
          this.picToView=.....
  }

I would like to know how to get the desgin of the first img, but when having 2 or more products on the card!

Here is my code:

Upvotes: 2

ion-gesture not working with Firebase data?

Answers (2)

Related Questions