将 Select Field 与 ol li carousel 指示器一起使用

Posted 2023-03-24

【中文标题】将 Select Field 与 ol li carousel 指示器一起使用

【英文标题】：Using Select Field with ol li carousel Indicators

【发布时间】：2021-09-01 21:34:24

【问题描述】：

\我在 Angular 中使用Bootstrap Carousel，我需要在ol li 轮播指示器上使用下拉选择选项从那里选择幻灯片编号。 这是我的代码：

 <ol class="carousel-indicators marg-top-sl">
    <li data-target="#carouselExampleControls"></li>
  </ol>

【参考方案1】：

更新声明，这个问题是关于 ng-bootstrap 轮播（不是关于引导轮播）。我没有删除“答案”，因为我认为这对某人有帮助，对不起

您正在使用 ng-bootstrap 轮播，因此请使用轮播的“方法”。如果你看到API，你会发现方法select，所以如果你的ngb-carousel是这样的（看我们放了一个“模板引用变量”

<ngb-carousel #mycarousel *ngIf="images" [interval]="0">
  <ng-template ngbSlide id="id1">
   ...
  </ng-template>
  <ng-template ngbSlide id="id2">
   ...
  </ng-template>
  ...
</ngb-carousel>

我们使用 ViewChild() 获得轮播

  @ViewChild('mycarousel') carousel:any

那么，你的选择可以像

<select #select (change)="carousel.select(select.value)">
  <option value="id1">Forest</option>
  <option value="id2">Lake</option>
  <option value="id3">Mountains</option>
</select>

注意：您可以使用(slide) 方法使选择使用获取幻灯片的值

<ngb-carousel #mycarousel *ngIf="images" [interval]="0" 
       (slide)="select.value=$event.current">

看到，在 API 中，当指示“输出”时，我们可以使用(name_of_the_output)="myfunction($event)"，并且“$event”获取 API 中指示的值 - 在这种情况下，API 告诉我们 $event 是一个对象NgbSlideEvent 类型的，所以我们可以使用 NgbSlideEvent 的“属性”，在这种情况下我们使用属性“当前”

见stackblitz

【参考方案2】：

如果我们可以使用引导轮播，首先是知道如何工作。 bootstrap carouse 应该将第一类图像作为活动图像，因此我们将有一个变量指示选择的索引（从 0 到 images.length-1）。所以我们可以有

current:number=0;

那么我们的图片可以是这样的

<div class="carousel-item active" [class.active]="current==0>
      <img src="..." class="d-block w-100" >
</div>
<div class="carousel-item active" [class.active]="current==1>
      <img src="..." class="d-block w-100" >
</div>
...

带有 [(ngModel)]="current" 的输​​入或选择应该可以工作

<select [(ngModel)]="current">
   <option value="0">1st image</option>
   <option value="1">2nd image</option>
   ....
</select>