【问题标题】:carousel issue | Angular 6轮播问题 |角 6
【发布时间】:2018-07-20 17:26:42
【问题描述】:

我正在使用 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>

【问题讨论】:

  • @jason,我找不到我的脚本和你的脚本有什么区别?!!
  • 有区别。您可以检查后修订。您的代码格式不正确。
  • 我会用 bootstrap 和 bootstrap-carousel 标记您的帖子,以获得更多关注。您还可以检查轮播并判断是否实际创建了两个 div 吗?由于您有相同的图像 url 硬编码,我想知道 bootstrap-carousel 是否没有消除基于 src 的重复...

标签: javascript angular angular5


【解决方案1】:

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

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

【讨论】:

  • 我对脚本所做的唯一更改是删除左侧的所有空白填充并将几个属性移动到新行,以便无需滚动即可更轻松地查看它们。对于在搜索类似问题时可能会找到您的问题的其他人来说,这更容易阅读并且更好地获得更多答案。至少您应该通过在编辑器中取消缩进来删除左侧的填充。请也删除此“答案”,因为它不是真正的答案。