Android Ionic 5将blob加载到映像中必须为最后一个映像运行ChangeDetectorRef

我有一个

IONIC 5+电容器+Angular 9应用程序

，可以从服务器加载一系列图像。它会逐个加载图像。每个图像组件调用一个文档服务，该服务返回从服务器下载的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个，它们会被渲染，除了最后一个。我在UI中到处玩，只要我单击某个地方，最后一幅图像就会被渲染。然后，我在

onloadend

事件中添加了

changeDetectorRef.detectChanges（）

调用。这是可行的，但我肯定不是这样做的

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

因此，我的问题是，这是

爱奥尼亚

上的一个实际错误，还是应该以不同的方式处理文件读取器事件-我是移动开发领域的新手，希望了解为什么会发生这种情况

---

非常感谢

只要用标准的img元素替换离子img并共享结果，这样你们就可以分离出离子成分对不起，忘了说我也做了那个。同样的结果出于某些原因，这是好的意思，因为你更多地孤立了一个问题。您共享的代码并不完整，因此很难看到您调用多个图像的准确程度，等等。每个图像组件都会执行自己对文档端点的调用，所以这就是我所拥有的所有代码。只需将ion img替换为标准img元素并共享结果，这样您就可以隔离ion组件对不起，忘了说我也这么做了。同样的结果出于某些原因，这是好的意思，因为你更多地孤立了一个问题。您共享的代码并不完整，因此很难看到您调用多个映像的确切方式，等等。每个映像组件都会执行自己对文档端点的调用，所以这就是我拥有的所有代码

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