Angular 2 ng2-img-cropper 未显示组件答案

【问题标题】：Angular 2 ng2-img-cropper not showing componentAngular 2 ng2-img-cropper 未显示组件
【发布时间】：2017-01-03 15:36:00
【问题描述】：

我想裁剪 3 张图片，然后上传使用 Angular 2 裁剪的图片。我集成了 Angular 2 Image Cropper“ng2-img-cropper”，但我没有让它工作。

当我运行应用程序并转到实现裁剪器的页面时，我只看到一个小图像方块，当我单击或拖动它时没有任何反应，并且控制台中没有错误。 Figure : Empty image square

我正在使用“ng2-img-cropper@4.6”。

这就是我进行实施的方式。我参考了这个 Github 链接https://github.com/cstefanache/angular2-img-cropper 我将它添加到 HTML 中

<div>
    <img-cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>
    <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">
</div>

然后这个进入类

import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';

data: any; cropperSettings: CropperSettings;

constructor() {

    this.cropperSettings = new CropperSettings();
    this.cropperSettings.width = 100;
    this.cropperSettings.height = 100;
    this.cropperSettings.croppedWidth =100;
    this.cropperSettings.croppedHeight = 100;
    this.cropperSettings.canvasWidth = 400;
    this.cropperSettings.canvasHeight = 300;

    this.data = {};

}

谢谢。

链接到问题Issue

【问题讨论】：

标签： image angular upload crop

【解决方案1】：

基本上有两个原因导致您的组件没有显示第一个或者您没有列出您在列表或指令中的组件，或者您没有正确绑定 img 中的 src。否则 angular2 图像裁剪器是对我来说工作正常，请参见此处。

https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/

请看这里

https://stackoverflow.com/a/39096831/5043867

如果您仍然有任何错误，请在附加的 plunker 中重现您的错误。

【讨论】：