我使用ngFor第一个变量来设置第一个项的类

• 模板 *

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions"  *ngFor="let item of items;let index = index" [attr.data-slide-to]="index"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item" *ngFor="let item of items;let index = index;let isFirst = first" [ngClass]="{active:isFirst}">
      <img [src]="item.url" class="d-block w-100" [alt]="item.title">
      <div class="carousel-caption d-none d-md-block">
        <h5 [textContent]="item.title"></h5>
        <p [textContent]="item.symmery"></p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

trigger carousel manualy like this

ngAfterViewInit(){
    $('#carouselExampleCaptions').carousel()
  }

demo 🚀

我认为ngFor会修改你的html树。
尝试用途：

<ng-container *ngFor="let pic of pics">

取而代之是：

<div *ngFor="let pic of pics">

你可以试试这个，它使用ngClass只设置列表中的第一个项目为活动的。

<div id="carouselExampleIndicators" #mycarouselControls class="carousel slide" data-ride="carousel" data-interval="2000">
    <div class="carousel-inner">                
            <ul *ngFor="let pic of pics;let i=index; first as isFirst">
                <div [ngClass]="isFirst ? 'carousel-item active' : 'carousel-item' ">
                    <li><img src={{pic}} class="d-block w-100 carousel-pic" alt="..."></li>
                </div>                                     
            </ul>
    </div>
</div>

您可以使用OnPush变更检测，所以创建一个哑组件。

@Component({
    selector: 'app-carousel-items',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `<div *ngFor="let pic of pics">
                 <div class="carousel-item">
                   <img src="http://MYURL/public/PinPhotos/{{pic.url}}" class="d-block w-100 carousel-pic" alt="...">
                 </div>
               </div>`,
})
export class CarouselItemsComponent  {
  @Input('pictures') pictures; // pass your pictures from this input  
}

现在你的循环不会再开始了。

你的代码有几个问题。
首先，您要在每个carousel-item上应用active类。为了解决这个问题，我们需要从模板中删除硬编码的类，并将其动态添加到第一个项目。幸运的是，我们可以在ngFor的帮助下获得索引，并使用ngClass将其应用到第一个项目。
接下来，对于你的carousel-indicators，你让它保持静态，有三个指示器，因此只显示了三个导航器按钮，以及carousel卡住的问题。为了解决这个问题，我们可以在指示器项上再次使用ngFor，将索引绑定到data-slide-to，然后像我们之前做的那样，使用ngClass将active类设置为第一个项。
我使用Bootstrap 5，但将代码修改为Bootstrap 4，因此应该可以工作。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
        <li *ngFor="let pic of pics; let i = index" data-target="#carouselExampleIndicators" [attr.data-slide-to]="i" [ngClass]="{'active': i == 0}"></li>
    </ol>

    <div class="carousel-inner">
        <div *ngFor="let pic of pics; let i = index" class="carousel-item" [ngClass]="{'active': i == 0}">
            <img src="http://MYURL/public/PinPhotos/{{pic.url}}" class="d-block w-100 carousel-pic" alt="...">
        </div>
    </div>

    <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-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-target="#carouselExampleCaptions" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>

</div>

对于任何寻找Bootstrap 5解决方案的人来说，它非常相似：

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">

    <div class="carousel-indicators">
        <button *ngFor="let url of picUrls; let i = index" type="button" data-bs-target="#carouselExampleCaptions" [attr.data-bs-slide-to]="i" aria-current="true" aria-label="..." [ngClass]="{'active': i == 0}">
        </button>
    </div>

    <div class="carousel-inner">
        <div *ngFor="let url of picUrls; let i = index" class="carousel-item" [ngClass]="{'active': i == 0}">
            <img src="{{url}}" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>

</div>