Javascript Cropper.js位于angular 2:Cropper显示previos图像

我基于angular 2构建ionic2应用程序。 在我的应用程序中，我使用crapper.js库让用户编辑他加载的图像

现在我有一个问题。 当用户加载新图片时，我将其显示在主容器中，并打开此图像的裁剪框

但是裁剪框显示了容器上的前一张图像

对我来说唯一有效的解决方案是通过setTimeout打开作物，但正如我们所知，这不是一个好的解决方案

还有别的想法吗

这是我的密码：

HTML-容器元素：

<div class="selected-image">
    <img  *ngIf="currentImage.src != null" #selectedPhoto [src]="currentImage.src"/>
</div>

---

另外，如果您是声誉超过1500的用户，请考虑为“cropper.js”创建新标签。

这可能没有多大帮助，但很久以前，在angular1应用程序中，我对条形码扫描仪设备拍摄的图像有问题，它总是落后于1张图片。当时我发现，直到下一次我尝试拍照时，应用程序才收到$digest循环。您是否尝试使用ChangeDetectorRef手动检测更改？ChangeDetectorRef是否也与angular 2相关？是的，这是它的文档

export class myClass {

       @ViewChild('selectedPhoto') input: ElementRef;
       pictures: PictureData[] = new Array();
       mainImage: PictureData = new PictureData();
       private cropper: Cropper;

       constructor(public _zone: NgZone) {}


      function addPicture(){
          var self = this;
          Camera.getPicture({
              destinationType: Camera.DestinationType.DATA_URL,
              sourceType: Camera.PictureSourceType.CAMERA,
              quality: 95,
              targetHeight: 400,
              targetWidth:400
          }).then((imageURI) => {
                  var picture = {src:imageURI};
                  self._zone.run(() => {
                      self.pictures.push(picture);
                      self.currentImage = picture;
                      setTimeout(() => {
                         if (this.cropper && this.cropper['canvas']) {
                             this.cropper.destroy();
                         }
                         if (!this.cropper || !this.cropper['canvas']) {
                              this.cropper = new Cropper(this.input.nativeElement, {
                                  aspectRatio: 1 / 1,
                                  dragMode: 'crop',
                                  modal: true,
                                  guides: false,
                                  center: true,
                                  highlight: false,
                                  background: false,
                                  autoCrop: true,
                                  autoCropArea: 0.9,
                                  responsive: true,
                                  checkCrossOrigin: false,
                                  crop: (e: Cropper.CropperCustomEvent) => {

                                  }
                            });
                         }
                      }, 2000);
                });
        });

   }

}