角度:乐蒂动画仅使for循环中的最后一个按钮动起来

时间:2020-05-19 12:19:00

标签: angular lottie

我在ngFor角度循环中渲染了多个按钮,这些按钮触发了抽奖动画。

这是示例用户界面

enter image description here

问题在于,无论我单击哪个按钮,只有最后一个按钮都处于动画状态。

这是我的html

 <ul class="list-group" *ngFor="let user of users">

 <button class="btn p-0" (click)="sendReq(user._id)">
                    <lottie-animation-view
                      [options]="lottieConfig"
                      [width]="60"
                      [height]="60"
                      (animCreated)="handleAnimation($event)"
                    >
                    </lottie-animation-view>
                  </button>
</ul>

这是我的功能

 sendReq(userId) {
    this.anim.play();
 //api call
      setTimeout(() => {
        this.anim.stop();
      }, 4000);
    });
  }

这是我的彩票配置。

   this.lottieConfig = {
      path: "../../../../assets/3.json",
      renderer: "canvas",
      autoplay: false,
      loop: false,
    };

谢谢

0 个答案:

没有答案