如何从集合中引用的AngularFireStorage上传的文件中获取downoladURL答案

【问题标题】：How to get the downoladURL from files uploaded with AngularFireStorage referenced in a collection如何从集合中引用的AngularFireStorage上传的文件中获取downoladURL
【发布时间】：2018-03-14 05:03:02
【问题描述】：

我正在使用 Angular v"5.2.0" 和 angularfire2 v"5.0.0-rc.6"

我正在使用 angularfire2 将图像上传到存储位置，并将它们引用到一个名为 photos 的集合：该集合具有以下结构：

团队名称：“团队名称”
路径："storageLocation/fileName.jpg"

大小：“4544”

<div *ngFor="let team  of teams |async">
 <h3>{{ team.teamName }}</h3>
 <img class="card-img-top" [src]="team.path" width=50px>
 <button class="button is-danger" (click)="close()">Close</button>
</div>

文档中提供的示例说我必须指向特定的 locationPath 来调用函数以检索到 downloadURl

constructor(private storage: AngularFireStorage) {
 const ref = this.storage.ref('users/davideast.jpg');
 this.profileUrl = ref.getDownloadUrl();
}

有没有办法从文档列表中检索 downloadURL？

【问题讨论】：

标签： angular5 google-cloud-firestore firebase-storage angularfire2

【解决方案1】：

我这样做的方法是创建一个管道并使用 *ngIf 传递 img：

    <div *ngFor="let photo of photos | async">
    <img class="galleryImage" *ngIf="photo.path | downloadUrl | async as photoUrl" [src]="photoUrl">
    </div>

管道“downloadUrl”使用来自 angularfire2 的 .getDownloadURL() 函数：

    @Pipe({name: 'downloadUrl'})

    export class DownloadUrlPipe implements PipeTransform {

        constructor(public storage: AngularFireStorage){}

        transform(featuredPhoto: any): any {
            let photo = this.storage.ref(featuredPhoto).getDownloadURL().do(console.log);
            return photo;
        }
    }

【讨论】：