角动态转盘活动类

Question

我有一个动态旋转木马，我直接从节点后端拉图像。一切都工作得很好，除了我的轮播一次显示所有图像而不是滑动，因为只有第一个滑块需要激活。

          <div class="carousel-inner">
              <div *ngFor="let data of gallery; let i=index" class="item active">
                  <img src="{{ data }}" alt="{{ name }}">
                  <div class="container">
                      <div class="carousel-caption">

                      </div>
                  </div>
              </div>
          </div>

如何仅使第一个动态滑块在旋转木马中具有活动类？

Answer 1

有很多方法可以做到这一点，一种简单的方法是将类分配与您希望激活的索引联系起来。也许是这样的：

<div class="carousel-inner">
    <div *ngFor="let data of gallery; let i=index" [class]="(i === activeIndex) ? 'active' : 'inactive'">
        <img src="{{ data }}" alt="{{ name }}">
        <div class="container">
            <div class="carousel-caption">

            </div>
        </div>
    </div>
</div>

其中activeIndex是您选择的组件变量，它是您想要活动的数据项的索引。

或者对于更详细的选择过程将其绑定到javascript函数：

<div class="carousel-inner">
    <div *ngFor="let data of gallery; let i=index" [class]="setClass(data, i)">
        <img src="{{ data }}" alt="{{ name }}">
        <div class="container">
            <div class="carousel-caption">

            </div>
        </div>
    </div>
</div>

现在在你的组件中：

setClass(data: DataType, i: number) {
    let class: string = 'inactive';
    /* more complex choice logic to set class = 'active' */
    return class;
}