如何在带有火力存储的旋转木马中显示图像

Question

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

在从数据库中接收到数据之前，我曾尝试使用一个为假的标志，但这并不说明为获取有效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并因此获得空白轮播之前，似乎没有可行的方法来暂停轮播的创建。

Answer 1

也许您可以用ngIf隐藏它？

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