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;
    }
  }

Stackblitz：https://stackblitz.com/edit/angular-hg13qq