Bootstrap Carousel Indicator active color change not working inside *ngFor - Angular

问题

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.

So far;

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

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>

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.

回答1:

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 Example

来源：https://stackoverflow.com/questions/58461294/bootstrap-carousel-indicator-active-color-change-not-working-inside-ngfor-ang

标签

angular

twitter-bootstrap

carousel