Angular 使用带有 *ngfor 的轮播

Question

我正在尝试制作一个旋转木马。 该轮播图像从字符串数组中获取其图像路径字符串。 当我单击向左或向右箭头时，我希望它增加或减少索引，这样我就可以更改显示的图像。 我怎样才能做到这一点。 不允许使用 ts 代码，只能使用 html。

 <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">               
        <ul  *ngFor="let carImagePath of carImagePaths; let i= index;first as isFirst">
          <div [ngClass]="isFirst ? 'carousel-item active' : 'carousel-item' "> 
            <li><img [src]="imageUrl+carImagePath" class="d-block w-100" alt="..."></li> 
          </div>
        </ul> 
        </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
      </div>
 </div>

Answer 1

作为解决方案，我放弃了尝试使用普通的引导轮播。我尝试了角度引导轮播。 ng 添加 ngx-bootstrap --component 轮播。将其安装到终端。并通过这个网站使用它自己的html：
https://valor-software.com/ngx-bootstrap/ #/components/carousel?tab=overview

现在它可以工作了。