Деактивировать активный Bootstrap Карусель во время цикла - PullRequest
Новая
       10

Деактивировать активный Bootstrap Карусель во время цикла

0 голосов
/ 19 марта 2020

Это мой файл component.ts, за которым следует код для карусели: `

  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 'имеет объекты внутри.

Но проблема в том, что, когда создается другой элемент (после итерации по первым трем объектам), тоже имеет класс 'active', , из-за которого ползунок не функционирует.

Есть ли способ удалить код класса HTML после нескольких итераций в ngFor l oop?

...