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

【问题标题】：ion-gesture not working with Firebase data?离子手势不适用于 Firebase 数据？
【发布时间】：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.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)
       }
     }

}

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

【问题讨论】：

标签： angular typescript firebase ionic-framework

【解决方案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()，一切都应该完美无缺。

【讨论】：