Angular 动态轮播活动类答案

【问题标题】：Angular Dynamic Carousel Active ClassAngular 动态轮播活动类
【发布时间】：2018-10-27 23:07:31
【问题描述】：

我有一个动态轮播，我直接从节点后端提取图像。一切正常，除了我的轮播 一次显示所有图像，而不是滑动，因为只有第一个滑块需要处于活动状态。

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

如何只使第一个动态滑块在轮播中具有活动类？

【问题讨论】：

我下面的回答对你有用吗？
不是真的，所以我使用了另一种解决方案。感谢您的意见
好的，很高兴你把它整理好了。 :)
@Dng 你能把你在哪里找到解决方案的链接放在这里吗？

标签： angular slider carousel

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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() {
  }

}

【讨论】：