firebase-storage - AngularFire / FireStore - getDownloadURL

Question

我正在使用什么

角火
FireStore
Firestore 的新 AngularFire 语法

我正在尝试做的事情

获取每个返回图像的下载 URL

问题

我正在获取第一张图片的下载 URL 并将其应用于全局变量。
如果存储了四个图像，则返回四个，但都是相同的图像，而不是四个唯一的图像

问题

我正在使用新的 AngularFire Firestore 语法来获取数据
我将如何遍历每个返回的图像并将它们绑定到我的 HTML？

组件 TS

  getIssueImages() {

    this.albumsCollection = this.afs.collection<any>(/albums/${albumId}/images`);
    this.albums = this.albumsCollection.snapshotChanges().map(actions => {
      return actions.map(a => {

        const data = a.payload.doc.data();

        const id = a.payload.doc.id;

        console.log(data);

        // Firebase Reference
        var storage = firebase.storage();

        // Get the image storage reference
        var image = data.image_thumbnail;

        //Create an image reference to the storage location
        var imagePathReference = storage.ref().child(image);

        // Get the download URL and set the local variable to the result (url)
        imagePathReference.getDownloadURL().then((url) => {
          this.image_thumbnail = url;
        });

        return { id, ...data };

      });
    });

  }

组件.HTML

正如预期的那样，这正确地返回了每个图像的唯一存储引用，而不是唯一的下载 URL 引用。

<ul>
  <li *ngFor="let image of images | async">
    {{ image.image_thumbnail }}
  </li>
</ul>

**Component.HTML - 不正确**

所以这个试图引用我试图从我的component.ts中的函数中获取的firebase存储downloadURL 。正如预期的那样，我没有遍历每一个，而是可能只得到第一个项目。结果，返回的所有四个图像都是相同的。

<ul>
  <li *ngFor="let image of images | async">
    {{ image_thumbnail }}
  </li>
</ul>

更新基于@James Daniels 响应的图像更新。

score 1 · Accepted Answer

您面临的主要问题是获取下载 URL 的异步性质。您可以使用Observable.fromPromise.

getIssueImages() {

  this.albumsCollection = this.afs.collection<any>(/albums/${albumId}/images`);
  this.albums = this.albumsCollection.snapshotChanges().map(actions => {
  return actions.map(a => {
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;

    // Firebase Reference
    var storage = firebase.storage();

    // Get the image storage reference
    var image = data.image_thumbnail;

    //Create an image reference to the storage location
    var imagePathReference = storage.ref().child(image);

    // Get the download URL and set the local variable to the result (url)
    var image_thumbnail = Observable.fromPromise(imagePathReference.getDownloadURL());

    return { id, image_thumbnail, ...data };

  });
});

}

现在image_thumbnail是异步的。

<ul>
  <li *ngFor="let image of images | async">
    {{ image.image_thumbnail | async }}
  </li>
</ul>

firebase-storage - AngularFire / FireStore - getDownloadURL

1 回答 1

Related

Reference