转盘问题|Angular 6



我使用的是Angular 6,我有topAdvertisementList[]正在返回2条要在我的转盘中显示的记录和一个要显示的固定图像,但我看到转盘中只显示了一条记录!,我认为我的HTML脚本有问题。

你能帮忙吗?

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li *ngFor="let add of topAdvertisementList;  let i=index"
data-target="#carousel-example-generic" data-slide-to="i" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div *ngFor="let add of topAdvertisementList; let i=index" [ngClass]="{
'carousel-item active':i === 0,
'carousel-item':i > 0 }">
<img src="assets/modules/dummy-assets/common/img/photos/1.jpeg" alt="{{i}}">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

格式不是问题,正确的脚本是

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li *ngFor="let add of topAdvertisementList; index as i" data-target="#carousel-example-generic" data-slide-to="i" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div *ngFor="let add of topAdvertisementList; index as i" [ngClass]="{
'carousel-item active':i == 0,
'carousel-item':i >= 0}">
<img *ngIf="add.adv_file" src="{{genericService.baseUrl}}/{{add.adv_file}}" alt="Advertisement">
<img *ngIf="!add.adv_file" src="assets/images/no-image.jpg" alt="Advertisement">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

最新更新