Ioni c 5 загрузить blob в изображение необходимо запустить ChangeDetectorRef для последнего изображения - PullRequest
Новая
       193

Ioni c 5 загрузить blob в изображение необходимо запустить ChangeDetectorRef для последнего изображения

0 голосов
/ 07 августа 2020

У меня есть IONIC 5 + capacitor + Angular 9 APP, который загружает массив изображений с сервера. Он загружает изображения одно за другим. Каждый компонент изображения вызывает службу документов, которая возвращает Blob, загруженный с сервера: 

this.documentService.download(fileDocumentDownloadRequest)
                            .subscribe((r: Blob) => {
                                if (r) {
                                    const reader = new FileReader();
                                    reader.onloadend = () => {
                                        this.loading = false;
                                        this.imageSrc = reader.result;
                                    };
                                    reader.readAsDataURL(r);
                                } else {
                                    this.loading = false;
                                }
                            },
                            async e => {
                                console.log('Error loading image', e);
                            },
                            () => {
                                this.loading = false;
                            });

Все работает нормально, однако, если у меня есть 2 изображения (HTML отображает изображения в виде сетки с 2 столбцами) это не работает, так как изображения загружаются, однако они не отображаются.

Если у меня есть несколько изображений, скажем, 8, они отображаются, кроме последнего. Я поигрался в пользовательском интерфейсе, и как только я где-то щелкаю, рендерится последнее изображение. Затем я добавил вызов changeDetectorRef.detectChanges() в событие onloadend. Это работает, но я уверен, что это не способ сделать это.

HTML У меня для этого: 

<div class="w-100 h-125px"
     (click)="imageSelected = !imageSelected; showImageActions()"
     [ngClass]="{'border-yellow': imageSelected}">
     <div class="position-absolute w-100 h-100 background-light-gray"></div>
     <ion-img *ngIf="!loading && imageSrc"
               [src]="imageSrc"
               class="position-relative z-index-plus-1 w-100 h-100 object-fit-cover">
     </ion-img>
     <ng-container *ngIf="loading">
          <div class="position-absolute content-centered-middle">
               <ion-spinner></ion-spinner>
          </div>
     </ng-container>
</div>

Я пробовал как событие onload, так и onloadend событие. С обоими я получаю точно такой же результат.

Между прочим, я не смог использовать стандартный конструктор new FileReader(), чтобы заставить читателя файлов работать на устройстве Android. Читая различные сообщения, я нашел решение, которое сработало: 

private getFileReader(): FileReader {
        const fileReader = new FileReader();
        const zoneOriginalInstance = (fileReader as any)['__zone_symbol__originalInstance'];
        return zoneOriginalInstance || fileReader;
    }

Итак, мой вопрос в том, действительно ли это ошибка IONIC или события чтения файлов должны обрабатываться по-другому - я довольно новичок в мобильных устройствах. разработки и хотел бы понять, почему это происходит.

Большое спасибо!

...