Bootstrap 4轮播 - 指标点击不起作用（Angular 6）答案

【问题标题】：Bootstrap 4 carousel - indicators click not working (Angular 6)Bootstrap 4轮播 - 指标点击不起作用（Angular 6）
【发布时间】：2018-11-27 07:46:56
【问题描述】：

我正在我的应用程序上创建 bootstrap 4 轮播，但指标有问题。单击任何主题应将您导航到单击的照片，如下所示： https://getbootstrap.com/docs/4.1/components/carousel/

我不知道为什么它不起作用，bootstrap 4 js 是在 jquery 之后导入的，所以一切都应该正常工作。

下一个按钮，上一个按钮可以工作，但 data-slide-to 不工作

我的代码：

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" *ngFor="let li of sliderImages; let i = index" [attr.data-slide-to]="i" [ngClass]="{'active' : i == 0}"></li>

      </ol>
      <div class="carousel-inner">

        <div class="carousel-item"  *ngFor="let image of sliderImages; let i = index" [ngClass]="{'active': i == 0}">
          <img class="d-block w-100" [src]="image">
        </div>

      </div>
      <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

编辑

当我从引导网站粘贴带有示例轮播的代码时，指标工作... *ngFor 循环有什么问题？结构相同...

【问题讨论】：

控制台有错误吗？
不，一切正常
看看ng-bootstrap，它是Bootstrap 组件的Angular 实现（不需要jQuery）。它有一个Carousel component。
是的，我用过这个，但我需要图像之间的淡入淡出动画：/ ng-bootstrap 我认为没有这个

标签： angular html bootstrap-4

【解决方案1】：

是的...我找到了解决方案...这很容易...

Attr data-target 必须具有相同的 id，这就是为什么这不起作用...

<!-- here is the id -->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000">
      <ol class="carousel-indicators">

<!-- here's second id which must be equal to first one -->

        <li data-target="#carouselExampleFade" *ngFor="let li of sliderImages; let i = index" [attr.data-slide-to]="i" [ngClass]="{'active' : i == 0}"></li>

      </ol>
      <div class="carousel-inner">

        <div class="carousel-item"  *ngFor="let image of sliderImages; let i = index" [ngClass]="{'active': i == 0}">
          <img class="d-block w-100" [src]="image">
        </div>

      </div>
      <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

【讨论】：