轮播问题| 角度6

Question

我正在使用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> 

Answer 1

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

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