刷新图片 - 可观察 Angular

Question

我使用 angular6、firebase 和 angularfire。

我这样显示我的图像：

import { AngularFireStorage } from 'angularfire2/storage';

  @Component({
  selector: 'app-geo',
  templateUrl: '  <img mat-card-image [src]="profileUrl | async" >

})
export class GeoComponent {


profileUrl: Observable<string | null>;

constructor( private storage: AngularFireStorage) 
  { 
  const ref = this.storage.ref('live/live.jpg');
  this.profileUrl = ref.getDownloadURL();        }

但是我的图像每 30 秒更改一次，但在我的应用程序中没有。我必须重新加载我的页面才能看到变化。

正常吗？

谢谢

Answer 1

如果我没理解错的话，你是说上传到存储中的文件（在存储中 this.storage.ref('live/live.jpg'); 的位置 ）每 30 秒更改一次 - 例如，其他人每 30 秒在现有文件上重新上传一张不同的图像？您希望将其反映在最终用户的屏幕上吗？是的 - 您必须重新加载页面才能看到新图像这一事实是完全正常的并且在意料之中。

没有像您描述的那样订阅文件的实现，至少在 Firebase 中没有。如果您可以通过 image carousels 完成您需要的事情，只需一次下载所有您想要的图像，然后循环浏览它们，这对您来说肯定更容易完成。

如果您确实需要实时照片更改，您将不得不使用 Firebase 的实时数据库或 Firestore，并订阅一组数据 - 该组数据正在最近上传的图片的 URLs。作为上传过程的一部分（或作为自动触发的云功能），最终确定的 URL 将添加到 queue/list 的 URL 中。然后你可以使用像 AngularFire2 这样的包来帮助你订阅 queue/list of URLs.

刷新图片 - 可观察 Angular

Refresh image - observable Angular

onchange

firebase

angularfire

angular