Возникли проблемы при попытке загрузить downloadURL для нескольких изображений из хранилища Firebase с помощью angular fire2

Question

Я создал коллекцию, которая содержит заголовок новостей, новости img, новости и т. Д. Я также создал метод загрузки, который отлично работает, загружает файл в хранилище и сохраняет путь к коллекции.

Проблемы при попытке получить изображение с помощью getDownloadUrl ();

Вот файлы

news.component.html

    <div class="container-fluid">
    <div *ngFor="let item of thenews | async">


        <p>
            {{ item.newsTitle }} {{ item.newsDesc }}
        </p>


        <div class="col-md-4">
            <img [src]="getImgUrl(item.newsImg)" class="img-responsive">
        </div>
    </div>
</div>

    <div class="container-fluid">
        <button mat-raised-button (click)="onLogout()">Logout</button>

    </div>

News.component.ts

import { tap } from 'rxjs/operators';
import { AngularFireStorage } from 'angularfire2/storage';

import { AngularFirestoreCollection, AngularFirestoreDocument, AngularFirestore } from 'angularfire2/firestore';
import { Component, OnInit, Injectable } from '@angular/core';
import { AuthService } from './../auth.service';
import { DataService } from '../services/data.service';

import { News } from './../models/newsModel';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})

@Injectable()

export class NewsComponent implements OnInit {

  news = {} as News;
  newsCol: AngularFirestoreCollection<News>;
  thenews: Observable<News[]>;
  imgUrl: Observable<any>;
  theData: News[] = [];


  constructor(public authservice: AuthService, public dataservice: DataService, public afs: AngularFirestore,
    private storage: AngularFireStorage) { }

  ngOnInit() {
    this.newsCol = this.afs.collection<News>('news');
    this.thenews = this.newsCol.valueChanges();
  }

  getImgUrl(img) {
    return this.storage.ref(img).getDownloadURL();
  }


  addNews(news) {
    this.dataservice.addNews(news);
  }


  onLogout() {
    this.authservice.onLogout();
  }

}

Когда он обслуживается, он запускаетсяв бесконечный цикл.и сайт зависает.Любая помощь?

Answer 1

getDownloadURL () - это наблюдаемый метод (асинхронная функция), поэтому вам придется подождать, пока наблюдаемое вернет значение, то есть URL или ноль, если изображение недоступно

например

imageUrl: Observable<string | null>;
const ref = this.storage.ref('users/davideast.jpg');
this.imageUrl= ref.getDownloadURL();

в шаблоне

<img [src]="profileUrl | async" />

Пожалуйста, обратитесь по этой ссылке с github

Надеюсь, это поможет