根据条件在 DOM 中添加属性“active”Swiper 标签

如何解决根据条件在 DOM 中添加属性“active”Swiper 标签

我正在尝试开发带有一些选项卡的应用程序。我正在使用 swiperjs 和 Angular。

这就是我所拥有的

    <div class="swiper-container">
      <span slot="container-start">Container Start</span>
        <div class="swiper-wrapper">
          <span slot="wrapper-start">Wrapper Start</span>
            <div *ngIf="CONDITION" [ngClass]="condition ? 'swiper-slide active' : 'swiper-slide'">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
          <span slot="wrapper-end">Wrapper End</span>
        </div>
      <span slot="container-end">Container End</span>
    </div>

我需要做的是根据条件更改各个 div 的类。例如，如果我隐藏了第一个（使用 *ngIf），我需要下一个 div 具有 'active' 属性。如果我隐藏了第一个和第三个，那么必须处于活动状态的 div 是第二个幻灯片 div。总之，我需要第一个“无隐藏”选项卡中的“活动”属性。我怎样才能做到这一点？