无*ngFor场景下获取ng-template索引 解决PrimeNG Carousel轮播索引问题

问题原因 #

你当前写法里ng-template中拿到的let-i = "index"是PrimeNG遍历整个carouselImages数组生成所有轮播项时的静态项索引，并非轮播当前激活展示项的动态索引，所以无法匹配自动切换后的当前展示内容。

可行实现方案 #

PrimeNG Carousel官方提供了page属性用来绑定当前激活页的索引，自动切换、手动切换时都会自动同步该值，按以下步骤修改即可：

步骤1：修改组件模板代码 #

给<p-carousel>添加page的双向绑定：

<p-carousel
  [value]="carouselImages"
  [style]="{ 'margin-top': '2em' }"
  [numVisible]="1"
  [numScroll]="1"
  [circular]="true"
  [autoplayInterval]="3000"
  [(page)]="currentCarouselIndex"
>
<ng-template let-image pTemplate="item">
  <div class="product-item">
    <div class="product-item-content">
      <div class="p-mb-3">
        <img
          [src]="image"
          alt="images to be displayed in carousel"
          class="product-image"
        />
      </div>
    </div>
    <!-- 直接用绑定的当前索引取对应标题、正文 -->
    <h5>{{carouselHeadData[currentCarouselIndex]}}</h5>
    <p>{{carouselBodyData[currentCarouselIndex]}}</p>
  </div>
</ng-template>
</p-carousel>

步骤2：给TS组件添加对应变量 #

在你的组件类中声明索引绑定变量：

// 声明当前轮播激活索引，默认从0开始
currentCarouselIndex = 0;

// 如果需要在每次切换时执行额外逻辑，可以绑定pageChange事件触发该方法
onCarouselChange() {
  console.log('当前激活索引：', this.currentCarouselIndex);
}

更推荐的优化写法 #

你当前把图片、标题、正文拆分为三个独立数组的写法容易出现索引不匹配的问题，建议合并为统一的对象数组：

// TS中定义轮播项数组
carouselItems = [
  { img: '图片1地址', head: '标题1', body: '正文1' },
  { img: '图片2地址', head: '标题2', body: '正文2' },
  // 更多轮播项...
]

模板中直接取当前项对应属性即可，无需额外索引匹配：

<p-carousel
  [value]="carouselItems"
  [style]="{ 'margin-top': '2em' }"
  [numVisible]="1"
  [numScroll]="1"
  [circular]="true"
  [autoplayInterval]="3000"
>
<ng-template let-item pTemplate="item">
  <div class="product-item">
    <div class="product-item-content">
      <div class="p-mb-3">
        <img
          [src]="item.img"
          alt="轮播展示图片"
          class="product-image"
        />
      </div>
    </div>
    <h5>{{item.head}}</h5>
    <p>{{item.body}}</p>
  </div>
</ng-template>
</p-carousel>

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