带服务的离子角滑动

问题描述

我正在尝试实现一个可以使用服务数据的滑动功能。但我不工作。如果我在页面中创建自己的数组，它通常会起作用。

这是我目前的代码。我是 angular 和 ionic 的新手。我引用了什么错误吗？

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();
  
    }

我什至尝试在事件中添加 console.log 以查看它在哪个步骤不起作用。但是当我检查谷歌浏览器的开发工具时，它没有显示任何内容。

 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);
}

如果我使用这种数组，它会起作用：

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 }) 卡片：QueryList;

提前致谢， 江

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）