如何在带有 Firebase 存储的轮播中显示图像答案

【问题标题】：How to display an image in a carousel with firebase storage如何在带有 Firebase 存储的轮播中显示图像
【发布时间】：2020-09-11 17:19:07
【问题描述】：

我正在尝试在轮播中显示一些图像。这些图像存储在 firebase 存储桶中，我必须使用 getDownloadURL() 方法来获取要显示的 URL。这意味着在创建轮播时，这些 URL 尚未生效，因为它们尚未从 firebase 中恢复。

在从我的数据库接收到数据之前，我尝试设置一个为 false 的标志，但这并不能说明为获取有效 URL 而对 firebase 系统进行的额外调用。我也看不到任何使用异步管道的方法。 “carouselUrls”变量保存有效的 URL。

<div fxLayout="column" 
     class="mt-32"
     flex="45%"
     style="width:40%; margin:0px 5%">

     <mat-carousel
         timings="250ms ease-in"
         [autoplay]="true"
         interval="5000"
         [slides]="currentDesign.marketplace.images.length"
         [loop]="true"
         orientation="ltr" >

            <mat-carousel-slide
                #matCarouselSlide
                *ngFor="let slide of carouselUrls; let i = index"
                [image]="slide"
                overlayColor="#00000040"
                [hideOverlay]="false">

            </mat-carousel-slide>
    </mat-carousel>

问题很简单。似乎没有可行的方法来暂停轮播的创建，直到所有对 firebase 的调用都返回有效的 URL，因此您得到一个空白的轮播。

【问题讨论】：

标签： angular firebase-storage

【解决方案1】：

也许你可以用ngIf 隐藏它？

<div *ngIf="carouselUrls?.length"
     fxLayout="column" 
     class="mt-32"
     flex="45%"
     style="width:40%; margin:0px 5%">

【讨论】：

我尝试了几种变体。我什至用 ngIf 隐藏了它，它有一个简单的 10 秒延迟，希望确保在创建项目之前解决所有可观察的问题。没有运气