离子手势不适用于 Firebase 数据？

Posted 2023-03-13

【中文标题】离子手势不适用于 Firebase 数据？

【英文标题】：ion-gesture not working with Firebase data?

【发布时间】：2021-04-04 15:17:49

【问题描述】：

你好。

我的 ionic 应用程序有问题，我在项目中添加了 ion-gesture，但由于 firebase 数据中的 ngFor=""，卡片无法移动

这是我的代码：

<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>

还有打字稿部分

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.deltaXpx) rotate($ev.deltaX / 10deg)`;

           ,
           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)
       
     

希望有人知道我需要改变什么。 并记得投票，该帖子可能会帮助其他有相同错误的编码员 提前谢谢你

【参考方案1】：

更改您的模板：

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

并在类中声明一个变量：

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

和更改视图：

changeView()
          this.picToView=.....
  

或

我想知道如何获取第一个 img 的设计，但是当卡上有 2 个或更多产品时！

这是我的代码：

【讨论】：

试过了还是不行，谢谢解答

【参考方案2】：

我遇到了同样的问题，并且发现对于动态（例如从 Firebase）加载的元素，现在使用 ngAfterViewInit() 还为时过早，因为那里的数据还没有准备好。

将代码从ngAfterViewInit() 移动到ngAfterViewChecked()，一切都应该完美无缺。