引导4旋转木马-指示器单击不工作(角6)

Question

我正在我的应用程序上创建引导4旋转木马，我对指示器有问题。单击任何主题都可以导航到单击的照片，如：https://getbootstrap.com/docs/4.1/components/carousel/

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

下一步，prev正在工作，但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循环有什么问题？结构是一样的。

Answer 1

嗯..。我找到了解决办法..。太简单了..。

Attr数据-目标必须有相同的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>