AngularFire / FireStore - getDownloadURL

Question

我用的是

• AngularFire
• FireStore
• 用于修复的新AngularFire语法

我想做什么，

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

问题

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

问题

• 我正在使用新的AngularFire修复语法来获取数据
• 如何循环遍历每个返回的图像并将它们绑定到我的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 -不正确**

• 因此，这一次尝试引用我试图从我的中的函数中获取的防火墙存储downloadURL。正如预期的那样，我不是在循环每一项，而是可能只得到第一项。因此，返回的所有四个图像都是相同的。

​

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

​

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

​

​

Answer 1

您面临的主要问题是获取下载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>