首页 > 解决方案 > AngularFireStorage - 如何为项目列表设置 downloadURL

问题描述

我正在查询一个集合,其中的每个文档都有一个关联的图像。我使用的 angularfirestorage 片段在设置一个图像时效果很好,但是,当我有一个列表时,它们最终都会得到相同的图像。

如何确保每个文档中的每个图像在 HTML 中都有正确的绑定?

myPhoto: Observable<string | null>;
...
   this.albums = this.albumCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        var image = myPhoto;
        const ref = this.storage.ref(image);
        this.myPhoto = ref.getDownloadURL();
        return { id, ...data };
      }))
    );



<div [ngStyle]="{'background-image': 'url(' + (myPhoto | async)  + ')'}"></div>

标签: firebasefirebase-storageangularfire2

解决方案


这有效:

代替

this.myPhoto = ref.getDownloadURL();

我用:

data.myPhoto = ref.getDownloadURL();

推荐阅读