Question

这是我的代码：

<div class="container">
  <div class="row">
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleFade" *ngFor="let li of images; let i = index" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active':''"></li>
        </ol>  
      <div class="carousel-inner">
        <div *ngFor="let image of images; let k = index" [ngClass]="k == 0 ? 'carousel-item active':'carousel-item'">
          <img class="d-block w-100" [src]=image.path [alt]=image.alt>
        </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>
</div>

该代码似乎是正确的。我尝试了多种解决方案，但似乎都没有用。任何帮助将不胜感激

Answer 1

旋转木马在7号角上完美工作

工作示例：https://codesandbox.io/s/q9o6zyjr0w

如有疑问，请在下面评论。

Answer 2

您的ngClass已磨损。这种方式适用于AngularJs，但不适用于Angular 7。您需要使用以下方式：[ngClass] =“ {'active'：i == 0}”。

Bootstrap 4 Carousel Indicator不适用于Angular 7

2 个答案: