Question

我是开发的新手，在我的项目中，我有一个轮播，目前有10张图像（在页面加载时从databse到json响应接收图像路径）。

我的问题是，第一张图片显示了两次。

app.component.ts

this.CartdataService.get_Basic_Images().subscribe(
      data => {

        this.get_Carousel_Images = data['1'];
        this.slider_Active_Item = data[1][0]['CAROUSEL_IMAGE_PATHS'];
      });

在这里，我从json响应中选择了第一张图片，并将其设置为“活动”项目。我想将其自动设置。

app.component.HTML

 <div class="col">
        <div class="container">
            <div class="row">
                <div id="carouselExampleControls" class="col-sm-12  col-md-12 carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="{{slider_Active_Item}}" alt="First slide">
                        </div>
                        <div *ngFor="let sliders of get_Carousel_Images; let i = index" class="carousel-item">
                            <img class="d-block w-100" [src]="sliders['CAROUSEL_IMAGE_PATHS']" [alt]="'img' + i">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

谁能帮我修复它。

Answer 1

您必须从图像列表中删除第一张图像。您可以将其过滤掉。由于以下原因，您获得了双张第一张图片：

 <div class="carousel-item active">
   <img class="d-block w-100" src="{{slider_Active_Item}}" alt="First slide">
 </div>

这是第一个活动图像，稍后循环使用，因为它没有从可访问图像列表中过滤掉。

如果您将其过滤掉，则将添加每张图像，但不包括已使用的第一张图像。

this.get_Carousel_Images = data['1'].filter((img, i) => i !== 0);

stackblitz...

另一种选择是只从数据列表中删除该图像，并直接链接到您的第一个活动图像。无需从数组中选择它。

Bootstrap Carousel图像在Angular 6中显示了两次

1 个答案: