时间戳

首页 > 解决方案 > 轮播问题 | 角 6

javascript - 轮播问题 | 角 6

问题描述

我正在使用 Angular 6，并且我有 topAdvertisementList[] 正在返回 2 条记录以显示在我的轮播中，并显示一个固定的图像，但我看到轮播中只显示了一条记录！，我认为我的 HTML 脚本有问题.

你能帮忙吗？

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li *ngFor="let add of topAdvertisementList;  let i=index"
            data-target="#carousel-example-generic" data-slide-to="i" class="active"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
            <div *ngFor="let add of topAdvertisementList; let i=index" [ngClass]="{
                    'carousel-item active':i === 0,
                    'carousel-item':i > 0 }">
                <img src="assets/modules/dummy-assets/common/img/photos/1.jpeg" alt="{{i}}">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

标签： javascriptangularangular5

解决方案

格式不是问题，正确的脚本是

                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li *ngFor="let add of topAdvertisementList; index as i" data-target="#carousel-example-generic" data-slide-to="i" class="active"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div *ngFor="let add of topAdvertisementList; index as i" [ngClass]="{
                                        'carousel-item active':i == 0,
                                        'carousel-item':i >= 0}">
                                <img *ngIf="add.adv_file" src="{{genericService.baseUrl}}/{{add.adv_file}}" alt="Advertisement">
                                <img *ngIf="!add.adv_file" src="assets/images/no-image.jpg" alt="Advertisement">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>

推荐阅读