角度 img src 未更新对象属性答案

【问题标题】：angular img src not updating on object property角度 img src 未更新对象属性
【发布时间】：2018-12-30 23:27:54
【问题描述】：

要在图片库中显示图片，我必须通过 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 对象中。为什么没有在所述对象上进行更新？

【问题讨论】：

可以分享组件代码吗？
您可能在收到您的 api 响应后无法检测到更改，您介意发布您的组件的那部分吗？
你总是在你的订阅中改变你的对象 galleryItem.blobUrlThumb，所以你的对象总是简单地改变 console.log 它。我做了同样的事情（使用局部变量）并将其添加到数组中（如果生成的 blob 不为空，则推送它）。
@JensHabegger 我发布了一些组件代码。我只是在其中订阅并设置galleryItem.blobUrlThumb variable。
@JensHabegger，这不是变更检测的问题。更改 galleryItem.blobUrlThumb 不会对用于初始化的数组产生影响。因此手动触发变更检测将没有任何价值

标签： html angular blob

【解决方案1】：

我认为您的问题是将 blob 推送到数组中。 galleryItem.blobUrlThumb 是 null 因为您的数组中没有该对象。您的数组中没有您在组件内迭代的 blob 数据

有了这个初始化：

galleryItems: GalleryItem[] = [galleryItem];

在将新的 blob 数据推送到其中之前，您需要重置数据。鉴于您订阅 observable 的方法，它看起来像：

 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 数据的新数组。

【讨论】：

galleryItems 数组已经存在。我只是在修改一个属于该数组的对象。由于对象已经存在，我不明白为什么我必须再次推送它（或者你的意思是删除它，然后重新推送它？）
除非您将其推送到数组中，否则src 将始终为空。这是有道理的，因为最初您的数组中没有任何内容。当您订阅 observable 发送的值时，您需要将该值推送到您的数组中。您的数组中只有一项吗？由于您的数组已经包含一些数据，您需要重置数组
查看我编辑的问题。 galleryItem 对象已经在数组中，甚至在我尝试获取 Blob URL 之前。当我得到 URL 时，我只是在修改它的一个属性。
我看到了编辑后的问题。由于您已经在数组中有一些初始值，因此您无法推送。这就是我说您需要重置阵列的原因。为什么不简单地创建一个可以推送galleryItem.blobUrlThumb 的新数组？
我希望将 Blob URL 保存在 GalleryItem 对象中。为什么没有在所述对象上进行更新？ 创建一个新数组只是解决我无法解释的问题的一种解决方法。如果我有一个文本输入，绑定到galleryItem.title，并以编程方式更改此变量，则该值将在 DOM 中自动更新。为什么 [src] 属性没有发生这种情况？