带动画的 ExpressionChangedAfterItHasBeenCheckedError

Question

我创建了一个动画，用于在图像发生变化时淡入/淡出图像src。当我在图像之间快速切换时（在动画完成之前），出现以下错误：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 
Previous value: 'src: http://localhost/wp-content/uploads/2018/11/billede1.jpg'. 
Current value: 'src: http://localhost/wp-content/uploads/2018/11/billede2.jpg'

但从视觉上看，并没有什么问题。动画工作正常并且显示正确的图像 - 即使我在它们之间快速切换并打印错误。但我想摆脱这个错误。关于我该如何做到这一点有什么想法吗？

动画片：

imageAnimation = trigger('imageAnimation', [
    state('in', style({opacity: 1, })),
    state('out', style({opacity: 0, })),
    transition('in <=> out', [
        animate('0.25s ease')
    ])
])

HTML：

  <div id="main-image-container" (mousemove)="displayBars()" [style.cursor]="mouseMovement ? 'default' : 'none'">
    <img id="main-image" src="{{displayedImage}}" [@imageAnimation]="imgState" (@imageAnimation.done)="onImageAnimationDone($event)">
  </div>
  <div id="bottom-bar">
    <div class="img-container" *ngFor="let img of gun.images">
        <img src="{{img.thumbnail_image_url}}" [class.selected]="img.full_image_url == selectedImage" (click)="setSelectedImage(img.full_image_url)">
    </div>
  </div>

成分：

  onImageAnimationDone(event: any){
    this.displayedImage = this.selectedImage;
    this.imgState = "in";
  }

  setSelectedImage(url: string){
    if(url != this.selectedImage){
      this.imgState = "out";
      this.selectedImage = url;
    }
  }

堆栈闪电战：https://stackblitz.com/edit/angular-hg13qq