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" [ngClass]="(i === 0) ? 'active' : ''">
        <img src="{{ data }}" alt="{{ name }}">
        <div class="container">
            <div class="carousel-caption">

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

Answer 2

执行此操作的方法有很多，一种简单的方法是将类分配与希望激活的索引绑定在一起。也许是这样的：

<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;
}

Answer 3

下面的代码有很多执行动态轮播的方法，可以帮助您动态地处理数据。

    <div class="carousel-inner">
        <div class="carousel-item " [ngClass]="{active:isFirst}" *ngFor="let caroiselProduct of caroiselProducts;
        index as i;first as isFirst">
            <img src="{{caroiselProduct.img_src}}" alt="Los Angeles" width="1100px" height="400px">
            <div class="carousel-caption">
                <h3>{{caroiselProduct.product_name}}</h3>
                <p>{{caroiselProduct.productsortdisc}}</p>
            </div>
        </div>
    </div>

component.ts文件

    export class CarouselslideComponent implements OnInit {
   constructor() { }
  caroiselProducts=[
    {
      "img_src":"../../assets/demo1.jpg",
      "product_name":"Demo1",
      "productsortdisc": "this is caroisel discription"
    },
    {
      "img_src":"../../assets/demo1.jpg",
      "product_name":"Demo2",
      "productsortdisc": "this is caroisel discription"
    },
    {
      "img_src":"../../assets/demo1.jpg",
      "product_name":"Demo3",
      "productsortdisc": "this is caroisel discription"
    }
  ];
  ngOnInit() {
  }

}

角动态轮播活动类

3 个答案: