輪播問題| 角度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>