Bootstrap Carousel Indicator活动颜色更改在* ngFor内部不起作用-Angular [英] Bootstrap Carousel Indicator active color change not working inside *ngFor - Angular

问题描述

即使可能是重复的，SO的现有解决方案也根本无法帮助我解决问题。

Even though it is possible to be a duplicate, existing solutions from SO do not help me to fix my issue, at all.

问题：滑块按钮的颜色是

Issue: Slider button color is not getting changed in active and inactive state inside *ngFor.

到目前为止；

mockData = [
    {
      img: 'https://picsum.photos/900/500?random&t=1'

    },
     {
      img: 'https://picsum.photos/900/500?random&t=3'

    },
     {      
      img: 'https://picsum.photos/900/500?random&t=4'

    },
     {      
      img: 'https://picsum.photos/900/500?random&t=6',

    },
    {      
      img: 'https://picsum.photos/900/500?random&t=7',

    },
    {      
      img: 'https://picsum.photos/900/500?random&t=8',

    },
    {      
      img: 'https://picsum.photos/900/500?random&t=6',

    },
  ]

我使用的HTML结构：

HTML structure I'm using :

<div id="dynamicAds" class="carousel slide" data-ride="carousel">
   <ol class="carousel-indicators" id="adList">
      <li data-target="#dynamicAds" *ngFor="let data of mockData; let i = index" [attr.data-slide-to]="i" [ngClass]="{'active' : i == 0}"></li>
   </ol>
   <div class="carousel-inner" id="dynamicAds" role="listbox" *ngFor="let data of mockData; let i = index" [ngClass]="{'active' : i == 0}" id="mockData">
   <img  class="item active" src="{{data.img}}"  />
</div>
</div>
</div>

我想在活动/不活动时显示的颜色：

Color I want to show when active/inactive:

#adList li {
    background-color: blue;
}

#adList .active {
    background-color: red;
}

SO的其他可能解决方案：不起作用就我而言：

Other possible solutions from SO: which is not working in my case:

<ol class="carousel-indicators" id="adList">
        <li data-target="#promotion-banner" *ngFor="let data of mockData;let i = index" [attr.data-slide-to]="i" 
            ngClass="i == 0 ? 'active' : '' "></li>
    </ol>


    <div class="carousel-inner" id="promotion-banner" role="listbox"  >
        <div class="item" >
        <img  *ngFor="let data of mockData; let k = index" ngClass =" k == 0 ? 'item active' :'item' " id="mockData" src="{{data.img}}"  />
        </div>
    </div>

需要帮助来解决此问题。如果可能，请与我分享stackblitz演示（如果存在）。 所有现有的演示都在使用 ngbootrap 或其他库，但我不想使用它们。

Need help to fix this. If possible someone pls share me stackblitz demo if exist. All existing demos are using ngbootrap or other libraries, but I don't want to use them.

感谢所有度过时间的人。

Thanks to all who spend their time.

推荐答案

查看引导文档您的标记应如下所示：

Looking at the bootstrap documentation your markup should be as follows:

<div id="dynamicAds" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators" id="adList">
        <li data-target="#dynamicAds"
            *ngFor="let data of mockData; let i = index"
            [attr.data-slide-to]="i" [class.active]="i === 0"></li>
    </ol>
    <div class="carousel-inner">
        <div *ngFor="let data of mockData; let i = index"
             class="carousel-item" [class.active]="i === 0">
            <img class="d-block w-100" src="{{data.img}}" alt=""/>
        </div>
    </div>
</div>

Stackblitz示例

Stackblitz Example

这篇关于Bootstrap Carousel Indicator活动颜色更改在* ngFor内部不起作用-Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！