引导轮播指示器活动颜色更改在 *ngFor语言 - 角度内不起作用

Question

尽管有可能是重复的，但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>

需要帮助来解决此问题。如果可能的话，有人请分享我堆栈闪电战演示(如果存在(。所有现有的演示都使用ngbootrap或其他库，但我不想使用它们。

感谢所有花时间的人。

Answer 1

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

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

堆栈闪电战示例