尝试使用angular fire2从firebase存储获取多个图像的下载URL时出现问题

我创建了一个集合，其中包含新闻标题、新闻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>

{{item.newsttitle}{{item.newsDesc}}

注销

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();
  }

}

从'rxjs/operators'导入{tap}；
从“angularfire2/storage”导入{AngularFireStorage}；
从“angularfire2/firestore”导入{AngularFirestoreCollection、AngularFirestoreDocument、AngularFirestore}；
从“@angular/core”导入{Component，OnInit，Injectable}；
从“/../auth.service”导入{AuthService}；
从“../services/data.service”导入{DataService}；
从“/../models/newsModel”导入{News}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：“应用程序新闻”，
templateUrl:'./news.component.html'，
样式URL:['./news.component.css']
})
@可注射（）
导出类NewsComponent实现OnInit{
新闻={}作为新闻；
新闻频道：AngularFirestoreCollection；
新闻：可见；
imgUrl：可观察的；
数据：新闻[]=[]；
构造函数（公共authservice:authservice，公共dataservice:dataservice，公共afs:AngularFirestore，
专用存储：AngularFireStorage）{}
恩戈尼尼特（）{
this.newsCol=this.afs.collection（'news'）；
this.thenews=this.newsCol.valueChanges（）；
}
getImgUrl（img）{
返回此.storage.ref（img）.getDownloadURL（）；
}
addNews（新闻）{
this.dataservice.addNews（新闻）；
}
onLogout（）{
this.authservice.onLogout（）；
}
}

当这是服务，它运行到一个无限循环。网站被挂起。

---

有什么帮助吗

getDownloadURL（）是一个可观察的方法（异步函数），因此您必须等待可观察的返回值，即url或null（如果图像不可用）

比如说

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

imageUrl：可见；
const ref=this.storage.ref（'users/davideast.jpg'）；
this.imageUrl=ref.getDownloadURL（）；

模板中

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

---

希望这有帮助

谢谢您的回复。问题是我在html文件中使用ngfor调用图像。那么，我如何动态地将每次迭代的图像值传递给typescript文件呢？不，您必须先下载所有图像，然后将数组传递给ngFor