首页 文章

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

提问于
浏览 次
0

我是开发新手，在我的项目中，我有一个旋转木马，目前我有10个图像（通过页面加载从数据库到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响应中选择第一个图像并设置为Active项目 . 我想自动设置它 .

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>

任何人都可以帮我解决它 .

angular typescript bootstrap-4

1 回答

  • 0

    您必须从图像列表中删除第一个图像 . 你可以过滤掉它 . 你有一个双重的第一张图片，因为：

    <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...

    另一种选择是从数据列表中删除该图像，并直接链接到您的第一个活动图像 . 不需要从阵列中选择它 .

    回复于

相关问题