ngFor 与 Angular 7 中的 Hammer JS 滑动功能
Posted
技术标签:
【中文标题】ngFor 与 Angular 7 中的 Hammer JS 滑动功能【英文标题】:ngFor with Hammer JS swipe function in Angular 7 【发布时间】:2020-12-06 07:31:00 【问题描述】:在使用带有 *ngFor 的 Hammer js 滑动功能时。预期的结果是滑动特定索引的图块,并且该图块将被删除。但是这样做动画现在不起作用。我所做的代码在下面的链接中:
https://stackblitz.com/edit/angular-animations-lib-demo-ahykzr?file=src%2Fapp%2Fapp.component.html
【问题讨论】:
【参考方案1】:Arjun,您使用一个独特的变量来控制动画,这适用于您拥有的所有 div
[@cardAnimator]="animationState"
所以,当改变变量时,所有的 div 都会被动画化。
你需要使用一个变量数组
将animationState声明为字符串数组
animationState: string[]=[];
en startAnimation 和 resetAnimation 使用数组
startAnimation(state,index)
console.log(state)
console.log(index)
this.asd = index;
if (!this.animationState[index])
this.animationState[index] = state;
resetAnimationState(index)
this.animationState[index] = '';
在 .html 中也使用数组
[@cardAnimator]="animationState[i]"
(@cardAnimator.done)="resetAnimationState(i)"
查看您的forked stackblitz
更新我更改 cardAnimator.done 以将索引作为参数传递,这样我就可以忘记“丑陋的”asd
变量
【讨论】:
@arjunmnairarjun,注意:我只是改进答案以忘记“丑陋”asd
变量
好吧,我尝试通过 startAnimation(state,index) this.asd = index; 使用数组中的索引来删除磁贴。 if (!this.animationState[index]) this.animationState[index] = state; this.datas.splice(this.asd, 1); 但动画不会出现以上是关于ngFor 与 Angular 7 中的 Hammer JS 滑动功能的主要内容,如果未能解决你的问题,请参考以下文章
*ngFor 如何与 Angular 2 中的模板变量一起工作?
<input> 元素中的“name”属性与 *ngFor 的 Angular2 绑定