Angular动态轮播缩略图点击跳转问题及替代方案咨询

首先纠正你代码里的一个语法错误：*ngFor中的分隔符应该用分号，不是逗号，正确写法是*ngFor="let img of pictures; let i=index"，这个错误可能导致索引i无法正确获取。

针对data-bs-slide-to无法解析动态值的问题，以下是几种可行的替代方案：

方案1：使用Angular属性绑定（推荐） #

Angular中绑定自定义data-*属性需要通过attr.前缀，这样动态值会被正确解析并设置到DOM属性上。同时要修正active类和aria-current属性的动态逻辑（否则所有缩略图按钮都会处于激活状态）：

<!-- 缩略图部分修正后代码 -->
<div class="slider carousel-indicators position-absolute">
  <div *ngFor="let img of pictures; let i=index">
    <button type="button" 
            data-bs-target="#carouselExampleIndicatorsLeft" 
            [attr.data-bs-slide-to]="i"
            [class.active]="i === 0"
            [attr.aria-current]="i === 0 ? 'true' : null"
            [attr.aria-label]="'Slide ' + (i + 1)">
      <img class="d-block w-100 img-fluid" [src]="img.path" />
    </button>
  </div>
</div>

另外，你的轮播内容部分也可以简化，无需用两个*ngIf区分激活状态：

<div class="carousel-inner mb-5">
  <div *ngFor="let pic of pictures; let i = index" 
       class="carousel-item" 
       [class.active]="i === 0">
    <img [src]="pic.path" class="d-block w-100" alt="Slide {{i+1}}" />
  </div>
</div>

方案2：手动控制轮播切换（灵活适配复杂场景） #

如果属性绑定方式仍有问题，可以通过Angular的ViewChild获取Bootstrap轮播实例，手动调用切换方法：

组件类代码 #

import { ViewChild, ElementRef, OnInit } from '@angular/core';
import Carousel from 'bootstrap/js/dist/carousel';

@Component({
  // 你的组件元数据（选择器、模板路径等）
})
export class YourComponent implements OnInit {
  @ViewChild('carousel') carousel!: ElementRef;
  private carouselInstance!: Carousel;

  ngOnInit(): void {
    // 初始化Bootstrap轮播实例
    this.carouselInstance = new Carousel(this.carousel.nativeElement);
  }

  // 跳转到指定索引的轮播图
  slideTo(index: number): void {
    this.carouselInstance.to(index);
  }
}

模板代码 #

给轮播容器添加模板引用变量#carousel：

<div #carousel id="carouselExampleIndicatorsLeft" class="carousel slide">
  <div class="carousel-inner mb-5">
    <div *ngFor="let pic of pictures; let i = index" 
         class="carousel-item" 
         [class.active]="i === 0">
      <img [src]="pic.path" class="d-block w-100" alt="Slide {{i+1}}" />
    </div>
  </div>
</div>

缩略图按钮通过点击事件调用切换方法：

<div class="slider carousel-indicators position-absolute">
  <div *ngFor="let img of pictures; let i=index">
    <button type="button" 
            (click)="slideTo(i)"
            [class.active]="i === 0"
            [attr.aria-current]="i === 0 ? 'true' : null"
            [attr.aria-label]="'Slide ' + (i + 1)">
      <img class="d-block w-100 img-fluid" [src]="img.path" />
    </button>
  </div>
</div>

方案3：字符串插值包裹属性（不推荐，仅作备选） #

如果不想使用属性绑定，也可以用字符串插值直接包裹属性值，但这种方式对类型转换的支持不如属性绑定可靠：

data-bs-slide-to="{{i}}"

内容的提问来源于stack exchange，提问作者avi