Обновить изображение - наблюдаемый угловой

Question

Я использую angular 6, 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.Если вы можете выполнить то, что вам нужно, с помощью карусели изображений , просто загрузив все нужные изображения за один раз, а затем поочередно пройдя их, вам определенно будет легче это сделать.

Если вам действительно нужны изменения фотографий в реальном времени, вам придется использовать базу данных Firebase в реальном времени или Firestore и подписаться на набор данных - этот набор данных является URL-адресами для недавно загруженных изображений.Как часть процесса загрузки ( или как автоматически запускаемая облачная функция ), окончательный URL-адрес будет добавлен в очередь / список URL-адресов.Затем вы можете использовать пакет, такой как AngularFire2, чтобы помочь вам подписаться на эту очередь / список URL-адресов.