AngularFire / FireStore - getDownloadURL

Question

我正在使用

• AngularFire
• 公司的FireStore
• Firestore的新AngularFire语法

我正在尝试做什么

• 获取每个返回图片的下载网址

问题

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

问题

• 我正在使用新的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

• 正如预期的那样，这会正确返回每个图像的唯一存储引用，但不会返回唯一的下载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的回复。

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>