如何解决带服务的离子角滑动
我正在尝试实现一个可以使用服务数据的滑动功能。但我不工作。如果我在页面中创建自己的数组,它通常会起作用。
这是我目前的代码。我是 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 举报,一经查实,本站将立刻删除。