Angular / Firestore - 显示占位符或加载器，直到获取数据

Question

我有 Firestore 查询，它从集合中获取一堆图像。在我的一个组件中，我有一个允许上传图像的按钮。当我选择要上传的图像时，我想显示 mat 进度条，直到我用存储 URL 填充了一个 firestore 节点。

我似乎遇到的问题是，因为我正在查看的不仅仅是一张图像，而是多张图像，我似乎无法弄清楚如何在不影响所有其他图像的情况下打开或关闭垫子进度条而不仅仅是新图像。

发生的情况是，当我选择图像时，在填充节点并读取图像 (image.newImageURL) 之前，什么都不会显示。在此期间，我想展示我的加载器。

值得注意的是，我最终可能会单独上传 5 张图片，因此加载器需要显示在新等待图片的容器内，而不是显示在其他图片上，如它在 html 中的位置所示。

任何想法都将不胜感激。

我的 HTML

<div class="wrapper">
  <ul class="imageUL" [sortablejs]="itemsArr" [sortablejsOptions]="options">
    <li class="image" *ngFor="let image of images | async; let i = index" [ngStyle]="{'background-image': 'url(' + (image.newImageURL | async)  + ')'}">
      <mat-progress-bar *ngIf="!image.newImageURL" mode="indeterminate"></mat-progress-bar>
    </li>
  </ul>
</div>

获取图片数据

  getImages() {

this.imagesCollection = this.afs.collection<any>(`${this.issueId}/images`, ref => {
  return ref.orderBy('image_order');
});

this.images = this.imagesCollection.snapshotChanges().map(actions => {


  // Empty the itemsArr so that we have a clean slate to add the updates in
  this.itemsArr = [];

  return actions.map(a => {
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;

    console.log('data = ' + data);

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

    if (data.image_photo_thumbnail != undefined) {

      // Get the image storage reference
      var image = data.image_photo_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 newImageURL = Observable.from(imagePathReference.getDownloadURL());

    }

    this.itemsArr.push({ id, ...data });

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

  });
});
}

Answer 1

我最终在列表项之外添加了以下 HTML，因此它始终出现在图像列表之后。

<li class="image" *ngIf="showImageLoading">
 <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</li>