Bootstrap Карусель Индикатор активного изменения цвета внутри не работает * ngFor - угловой - PullRequest
Новая
       41

Bootstrap Карусель Индикатор активного изменения цвета внутри не работает * ngFor - угловой

1 голос
/ 19 октября 2019

Несмотря на то, что возможно дублирование, существующие решения от SO вообще не помогают мне решить мою проблему.

Проблема: Цвет кнопки ползунка не изменяется в активном и неактивном состоянии внутри* 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-структура, которую я использую: 

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

Цвет, который я хочу показать, когда активен/ неактивный: 

#adList li {
    background-color: blue;
}

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

Другие возможные решения SO: который не работает в моем случае: 

<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 или другие библиотеки, но я не хочу их использовать.

Спасибо всем, кто проводит время.

1 Ответ

1 голос
/ 19 октября 2019

Глядя на документацию по начальной загрузке ваша разметка должна выглядеть следующим образом: 

<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

...