Angular中的Bootstrap carousel动态属性

我正在使用一个Bootstrap 5 carousel ，它带有data-bs-ride="carousel"属性来自动播放幻灯片.通过使用"False"而不是"Carousel"，它不会自动播放.

我正在try 用按钮将"Carousel"替换为"False"，这样用户就可以暂停自动播放模式:

这是我的HTML码:

<div class="container">
      <!-- WHEN data-bs-ride="carousel" it auto-plays, when data-bs-ride="false" it stops -->
      <div #carousel id="carousel" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        
        <div class="carousel-inner">

          <div *ngFor="let item of carouselItemsHorizontal" class="carousel-item {{item.activeClass}}" data-bs-interval="3000">
            <img src="{{item.imageSrc}}" class="carouselImage d-flex justify-content-center" alt="{{item.imageAlt}}">
              <div class="carousel-caption d-none d-md-block">
                <button routerLink="about" class="btn">Learn more</button>
              </div>
          </div>
          
        </div>
        
        <div class="carouselPlayPause">
          <svg (click)="playClick()" *ngIf="isPlaying" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-play playPauseColor" viewBox="0 0 16 16">
            <path d="M10.804 8 5 4.633v6.734zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696z"/>
            <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
          </svg>

          <svg (click)="pauseClick()" *ngIf="!isPlaying" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-pause playPauseColor" viewBox="0 0 16 16">
            <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5"/>
            <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
          </svg>
        </div>
        
      </div>
    </div>

这是我的Typescript 课程:

export class HomeCarouselComponent {

  dataRide:string = 'carousel';
  isPlaying:boolean = false;

  playClick():void {
    this.dataRide = 'carousel';
    this.isPlaying = !this.isPlaying;
  }

  pauseClick():void {
    this.dataRide = 'false';
    this.isPlaying = !this.isPlaying;
  }

  carouselItemsHorizontal:CarouselItems[] = [
    {
      imageSrc: '../../assets/images/home-images/carousel/main-artboard.png',
      imageAlt: 'Welcome to "Learning Angular" Application banner.',
      activeClass: 'active'
    },
    {
      imageSrc: '../../assets/images/home-images/carousel/sections-artboard.png',
      imageAlt: 'sections',
    },
    {
      imageSrc: '../../assets/images/home-images/carousel/projects-artboard.png',
      imageAlt: 'projects',
    },
  ]
}

顶部还有一个界面，用于项目形状:

interface CarouselItems {
  imageSrc:string;
  imageAlt:string;
  activeClass?:string;
}

我try 了这个[data-bs-ride]="dataRide"，但给出了这个错误: 无法绑定到‘data-bs-ride’，因为它不是‘div’的已知属性.ngtsc(-998002)

我也try 了这个[attr.data-bs-ride]="dataRide"，没有错误，但按钮不暂停/播放 carousel .

也不能使用字符串内插.

有什么好的建议吗？

非常提前感谢您！

[data-bs-ride]="dataRide"表示错误:ngtsc(-998002)

[attr.data-bs-ride]="dataRide"，没有错误，但按钮不暂停/播放转盘.