如何将幻灯片添加到引导轮播

Question

我想将幻灯片添加到从 REST 服务接收的引导轮播。

我尝试在组件的 HTML 中添加 ngFor 等角度指令。无法弄清楚如何控制数组列表中第一张幻灯片的“活动”标志。

我知道如何通过创建“carousel-items”来添加静态幻灯片，其中第一个必须声明为“active”：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">

    <div class="carousel-item active">
      <img class="d-block w-100" src="http://placehold.it/800x300">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
    </div>

    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/800x300">
      <div class="carousel-caption d-none d-md-block">
        <h5>second slide label</h5>
        <p>second slide text</p>
      </div>

    </div>

    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/800x300">
      <div class="carousel-caption d-none d-md-block">
        <h5>third slide label</h5>
        <p>third slide text</p>
      </div>

    </div>

  </div>

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

提前致谢 - 这是我迄今为止尝试控制“活动”标志的方法：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">

    <div *ngFor="let teaser of hashtagsTeaser; let isFirst = first" class="carousel-item [class.active]="isFirst">
      <img class="d-block w-100" src="http://placehold.it/800x300">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
    </div>

  </div>

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

Answer 1

您可以将以下内容添加到 *ngFor

*ngFor="let teaser of hashtagsTeaser; let isFirst = first 
[class.active]="isFirst"

这会将活动类添加到第一张幻灯片