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>

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

1 个答案: