循环时停用活动的Bootstrap轮播项目

时间:2020-03-19 17:49:02

标签: html angular typescript bootstrap-4 carousel

这是我的component.ts文件,后跟Carousel的代码: `

  public dummyData = [
    {
      title: '50 Cent',
      text: 'Get Rich or Die Tryin'
    },
    {
      title: 'Dr. Dre',
      text: '2001'
    },
    {
      title: 'Eminem',
      text: 'Recovery'
    },
    {
      title: '2pac',
      text: 'All Eyez On Me'
    },
    {
      title: 'The Notorious B.I.G',
      text: 'Life After Death'
    }
  ];
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" *ngFor="let dums of dummyData">
      <div class="row">
        <div class="card col-md" id="card">
          <div class="card-body  text-center">
            <div class="hover-me">view on github</div>
            <h4 class="card-title">{{dums.title}}</h4>
            <div class="card-text">{{dums.text}}</div>
          </div>
        </div>
        <div class="card col-md">
          <!-- not filled yet -->
        </div>
        <div class="card col-md">
          <!-- not filled yet -->
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我有一个名为“ dummyData”的对象数组,并且上面的代码必须创建轮播项目(每个带有三个框),只要数组“ dummyData”中包含对象。

但是问题是,当创建另一个项目时(在前三个对象上迭代之后),它也具有“活动”类,由于该类滑块不起作用。 >

在ngFor循环中进行几次迭代后,是否可以删除HTML类代码?

0 个答案:

没有答案