Angular动态轮播问题：数据库取图后CSS类设置失效致图片全显

你的代码有两个核心问题导致所有图片同时显示：

问题1：轮播容器结构错误 #

你把*ngFor放在了carousel-inner上，这会为每张图片生成一个独立的carousel-inner容器，而Bootstrap轮播要求只有一个carousel-inner，内部包含所有轮播项。

问题2：动态类绑定语法错误 #

直接在class属性里写插值表达式的三元运算符是无效的，Angular需要用专门的动态类绑定语法。

修正后的代码 #

<div class="carousel-inner">
  <div 
    *ngFor="let doc of banner_arr; let i=index"
    [ngClass]="{'carousel-item': true, 'active': i === 0}"
  >
    <h4>{{i}}</h4>
    <img 
      [src]="doc.image_url" 
      [alt]="i === 0 ? 'First slide' : i === 1 ? 'Second slide' : 'Third slide'"
    >
  </div>
</div>

关键修正说明 #

• 将*ngFor移到carousel-item元素上，确保所有轮播项都在同一个carousel-inner容器内。
• 使用[ngClass]进行动态类绑定：
  • 始终添加carousel-item类
  • 当索引i等于0时，额外添加active类
• 使用属性绑定[src]和[alt]替代插值表达式，这是Angular中绑定属性的标准写法，避免语法错误。

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