Question

要在图像库中显示图像，我必须通过REST API下载Blob。我有多个图像被* ngFor循环渲染，如下所示：

<div *ngFor="let galleryItem of galleryItems">
   <img [src]="galleryItem.blobUrlThumb">
</div>

但是，当我的Blob URL写入galleryItem对象时，图像src顽固地停留在null上并且不会更新。

// Component code example
galleryItems: GalleryItem[] = [galleryItem];
this.apiService.download(`/x/y/${galleryItem.id}`).subscribe((blob: Blob) => {
   galleryItem.blobUrlThumb = this.sanitization.bypassSecurityTrustUrl(URL.createObjectURL(blob));
});

如果我对组件中的局部变量执行相同操作，则一切正常：

<div *ngFor="let galleryItem of galleryItems">
   <img [src]="blobUrlThumb">
</div>

我希望将Blob URL保存在GalleryItem对象中。为什么没有在所述对象上进行更新？

Answer 1

我认为您的问题是将blob推入数组。 galleryItem.blobUrlThumb是null，因为数组中没有该对象。在数组中没有要在组件内部进行迭代的Blob数据

使用此初始化：

galleryItems: GalleryItem[] = [galleryItem];

在将新的Blob数据推送到其中之前，您需要重置数据。给定您使用可观察对象的方法，它看起来像：

 subscribeMethod() : void {
     // reset the array 
     // otherwise you will iterate over objects that are null
     this.galleryItems= [];
     this.apiService.download(`/x/y/${galleryItem.id}`).subscribe((blob: Blob) => { 
       // and you can push the new data
       galleryItem.blobUrlThumb = this.sanitization.bypassSecurityTrustUrl(URL.createObjectURL(blob))
       this.galleryItems.push(galleryItem.blobUrlThumb);
      });
   }

或另一种方式，只是创建一个新数组，将用于推送Blob数据。

角度img src无法在对象属性上更新

1 个答案: