我的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屋！