AngularFire / FireStore - getDownloadURL

Question

我在用什么

AngularFire
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 };

      });
    });

  }

Component.HTML

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

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

**Component.HTML - 不正确 **

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

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

更新图片更新基于@James Daniels 回复。

Answer 1

您面临的主要问题是获取下载的异步性质 URL。 You can solve that with an 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>

AngularFire / FireStore - getDownloadURL

AngularFire / FireStore - getDownloadURL

firebase-storage

google-cloud-firestore

angularfire5