【发布时间】：2021-11-01 19:24:33
【问题描述】：
我有一个模态，我会在其中使用一个组件（ngx-image-cropper），但每次在图像裁剪器上出现“无法读取未定义的属性实例”时都会出现此错误。
Preview() 调用成功并且 this.logoToUpload 工作正常，问题是用图像裁剪器组件打开模态，否则模态也能正常工作。
这是我的代码：
import { ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
@Component({
selector: 'logo',
templateUrl: './logo.component.html',
styleUrls: ['./logo.component.scss']
})
export class LogoComponent implements OnInit {
constructor(
private modalService: NgbModal,
) {}
ngOnInit() {}
preview(content) {
var mimeType = this.logoToUpload.type;
if (mimeType.match(/image\/*/) == null) {
return;
}
debugger;
// Show preview
this.modalService.open(content).result.then(
(result) => {
//DO SOMETHING IN CASE RESULT IS SAVE OR NOT
}, (reason) => {
});
}
HTML：
<ng-template #modalCroppingImage let-modal>
<div class="modal-header modal-header-new">
Select area
</div>
<div class="modal-body">
<image-cropper [imageFile]="logoToUpload"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 3"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"></image-cropper>
</div>
<div>
<button type="button" class="btn btn-primary button-modal-detail-new" (click)="modal.close('Save'); resetView();">SAVE<!--Close--></button>
<button type="button" class="btn btn-primary button-modal-detail-new" (click)="modal.close('Close'); resetView();">CLOSE<!--Close--></button>
</div>
</ng-template>
编辑：我也收到此错误：
StaticInjectorError(AppModule)[ImageCropperComponent -> CropService]: StaticInjectorError（平台：核心）[ImageCropperComponent -> CropService]： NullInjectorError: 没有 CropService 的提供者！
【问题讨论】：
-
试试
public modalService?只是一个猜测。另外，在您看来，modal未定义（您的组件中没有this.modal），我想应该是(click)="modalService.close('Save')" -
模板上有
let-modal。这是一个ng-bootstrap模态：ng-bootstrap.github.io/#/components/modal/examples#basic -
错误的堆栈跟踪是什么？你应该检查一下。
-
@Totati let-modal 是什么意思？
-
我看到我在控制台中也收到此错误：StaticInjectorError(AppModule)[ImageCropperComponent -> CropService]: StaticInjectorError(Platform: core)[ImageCropperComponent -> CropService]: NullInjectorError: No provider for CropService！
标签： javascript html angular ngx-image-cropper