Question

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

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

我知道如何通过创建“旋转木马项目”来添加静态幻灯片，首先必须将其声明为“活动”：

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

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

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

1 个答案: