我的ngmodel无法重新加载,绑定无法正常工作 [英] my ngmodel does not reload, the binding is not working
问题描述
实际上,此代码来自于ionic,我正在处理通过照片捕获获得的图像.一切正常,我得到了斑点,但是由于某种原因我的图像未显示在模板中,我认为角度绑定没有更新.我该怎么做才能强迫它?
Actually this code is from ionic, and I am processing an image that I get through the photo capture. everything works fine, I get the blob, but for some reason my image is not shown in the template, I think the angular binding is not updating. What can I do to force it?
myblob:any=null;
takePhoto() {
const options: CameraOptions = {
quality: 60,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
allowEdit: true,
};
this.camera.getPicture(options).then(
(imageData) => {
this.file
.resolveLocalFilesystemUrl(imageData)
.then((entry: FileEntry) => {
entry.file((file) => {
this.readFile(file);
});
});
},
(err) => {
// Handle error
}
);
}
readFile(file: any) {
const reader = new FileReader();
reader.onloadend = () => {
const imgBlob = new Blob([reader.result], {
type: file.type,
});
//my ngModel (updating) ****------------->
this.myblob = URL.createObjectURL(imgBlob);
console.log(this.documento_reverso);
};
reader.readAsArrayBuffer(file);
}
在我的模板中:
<button (click)="takePhoto()">Take photo</button>
<img *ngIf="myblob" [src]="myblob"> --> is not show at first time button click
怎么办?
单击按钮获取照片时,图像不会显示,但是第二次单击按钮时,图像会立即显示.
When I click the button and get the photo, the image is not displayed, but the second time I click the button it is immediately displayed.
推荐答案
您可以将代码包装在NgZone.run
中,以确保其在Angular区域中运行,并且通过更改检测来获取更改:
You can wrap the code in NgZone.run
to make sure that it runs in the Angular zone and that the change is picked up by change detection:
import { NgZone } from '@angular/core';
constructor(private ngZone: NgZone) { }
readFile(file: any) {
...
this.ngZone.run(() => {
this.myblob = URL.createObjectURL(imgBlob);
});
...
}
这篇关于我的ngmodel无法重新加载,绑定无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!