ngFor 与 Angular 7 中的 Hammer JS 滑动功能答案

【问题标题】：ngFor with Hammer JS swipe function in Angular 7ngFor 与 Angular 7 中的 Hammer JS 滑动功能
【发布时间】：2020-12-06 07:31:00
【问题描述】：

在使用带有 *ngFor 的 Hammer js 滑动功能时。预期的结果是滑动特定索引的图块，并且该图块将被删除。但是这样做动画现在不起作用。我所做的代码在下面的链接中：

https://stackblitz.com/edit/angular-animations-lib-demo-ahykzr?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

标签： angular hammer.js hammer

【解决方案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); } 但动画不会出现