моя нгмодель не перезагружается, привязка не работает

Question

На самом деле этот код от ioni c, и я обрабатываю изображение, полученное при захвате фотографии. все работает нормально, я получаю блоб, но по какой-то причине мое изображение не отображается в шаблоне, я думаю, что привязка angular не обновляется. Что я могу сделать, чтобы заставить его?

    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);
  });
  ...
}