PrimeNG v17 Carousel设置autoplayInterval后HTML代码重复问题

问题现象 #

在Angular 17环境使用PrimeNG v17的Carousel组件时，设置autoplayInterval属性后，即便将numVisible设为1，带有testimonialsCard类的div会被重复渲染，幻灯片显示两行内容（预期应为一行）。移除autoplayInterval属性则无此问题，尝试不同属性绑定写法也未解决。

源码 #

<p-carousel [value]="testimonials" [numVisible]="3" [numScroll]="1" [circular]="true" [autoplayInterval]="5000" orientation="horizontal">
    <ng-template pTemplate="item" let-testimonials>
        <div class="testimonialsCard">
            <div class="testimonialsCardInner">
                <div class="d-flex testimonialsCardTop">
                    <img src="https://t4.ftcdn.net/jpg/03/64/21/11/360_F_364211147_1qgLVxv1Tcq0Ohz3FawUfrtONzz8nq3e.jpg" alt="">
                    <div>
                        <p>Data</p>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-carousel>

渲染后的HTML代码 #

<div ng-reflect-ng-class="[object Object]" aria-hidden="false" aria-label="0" aria-roledescription="Slide" class="p-carousel-item">
    <div _ngcontent-ng-c878305462="" class="testimonialsCard">
        <div _ngcontent-ng-c878305462="" class="testimonialsCardInner">
            <div _ngcontent-ng-c878305462="" class="d-flex testimonialsCardTop"><img _ngcontent-ng-c878305462="" src="https://t4.ftcdn.net/jpg/03/64/21/11/360_F_364211147_1qgLVxv1Tcq0Ohz3FawUfrtONzz8nq3e.jpg" alt="">
                <div _ngcontent-ng-c878305462="">
                    <p _ngcontent-ng-c878305462="">Data</p>
                </div>
            </div>
        </div>
    </div>

    <div _ngcontent-ng-c878305462="" class="testimonialsCard">
        <div _ngcontent-ng-c878305462="" class="testimonialsCardInner">
            <div _ngcontent-ng-c878305462="" class="d-flex testimonialsCardTop"><img _ngcontent-ng-c878305462="" src="https://t4.ftcdn.net/jpg/03/64/21/11/360_F_364211147_1qgLVxv1Tcq0Ohz3FawUfrtONzz8nq3e.jpg" alt="">
                <div _ngcontent-ng-c878305462="">
                    <p _ngcontent-ng-c878305462="">Data</p>
                </div>
            </div>
        </div>
    </div>
  <!--bindings={
    "ng-reflect-ng-template-outlet-context": "[object Object]"
  }-->
</div>

问题截图 #

这是PrimeNG 17 Carousel组件的已知bug，和自动播放逻辑中的模板重复渲染有关，可通过以下方式解决：

1. 升级PrimeNG版本：官方在v17.1.1及以上版本已修复此问题，直接升级到对应版本即可。
2. CSS临时修复：如果暂时无法升级，可通过CSS隐藏重复的卡片：

.p-carousel-item .testimonialsCard:not(:first-child) {
    display: none;
}

3. 自定义自动播放逻辑：移除组件自带的autoplayInterval，通过Angular的定时器手动控制轮播：

import { Component, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
import { Carousel } from 'primeng/carousel';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit, OnDestroy {
  @ViewChild(Carousel) carousel!: Carousel;
  private autoplayTimer: any;

  ngAfterViewInit() {
    this.startAutoplay();
  }

  private startAutoplay() {
    this.autoplayTimer = setInterval(() => {
      this.carousel.next();
    }, 5000);
  }

  ngOnDestroy() {
    if (this.autoplayTimer) {
      clearInterval(this.autoplayTimer);
    }
  }
}

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