Angular中使用ngFor实现自动轮播仅显示首张图片问题求助

错误分析 #

你的代码存在两个关键问题：

1. *ngFor 循环位置错误：手动编写的代码里所有轮播图片都在同一个 .slider-container 容器内，但当前循环把 .slider-container 也重复渲染了，导致生成3个独立的容器，每个容器里只有一张图，不符合轮播组件的结构要求。
2. 图片源绑定错误：<img> 的 [src] 绑定的是整个 images 数组，而非循环中的单个图片地址 item，这会导致图片加载异常。

修正后的代码 #

component.html #

<div class="slider">
    <div class="slider-container">
        <!-- 将*ngFor移到figure上，保持slider-container唯一 -->
        <figure *ngFor="let item of images">
            <img [src]="item" class="img-responsive"/>
        </figure>
    </div>
</div>

修改后结构与你手动编写的代码完全一致：单个 .slider-container 内包含3个 <figure>，每个 <figure> 对应数组里的一张图片，轮播组件就能正常识别所有轮播项并展示。

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