0

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

到目前为止，这是我的代码。我是角度和离子的新手。我引用有什么问题吗？

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；

提前感谢，江

4

0 回答 0