我的ngmodel没有重新加载，绑定不起作用

Question

实际上，这段代码来自ionic，我正在处理通过照片捕获获得的图像。一切都很好，我得到了斑点，但由于某种原因，我的图像没有显示在模板中，我认为角度绑定没有更新。我能做些什么来强迫它？

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

怎么能做到呢？

当我点击按钮并获得照片时，图像不会显示，但当我第二次点击按钮时，它会立即显示。

Answer 1

您可以将代码包装在NgZone.run中，以确保它在Angular区域中运行，并且通过更改检测来获取更改：

import { NgZone } from '@angular/core';
constructor(private ngZone: NgZone) { }
readFile(file: any) {
...
this.ngZone.run(() => {
this.myblob = URL.createObjectURL(imgBlob);
});
...
}