Angular使用*ngFor循环渲染图片列表出现每行图片重复问题

你的*ngFor指令绑定在了行容器.row上，遍历逻辑存在两层错误：

• 每遍历到gallery数组中的1张图片，就生成1个独立的行容器
• 每个行容器内硬编码了4个图片标签，全部绑定当前循环到的同一张图片地址，自然出现每行4张完全相同的问题

提供两种可直接落地的实现方式： #

方案1：依赖栅格自动换行（推荐，无需修改TS代码） #

你使用的是Bootstrap响应式栅格类，col-l-3对应大屏下每列占12栅格的3份，刚好满4列就自动换行，直接把*ngFor绑定到列节点即可：

<div class="row">
  <div class="col-xs-12 col-s-6 col-4 col-l-3" *ngFor="let image of gallery; let i = index">
    <img (click)="openModal()" [src]="getSanitizeUrl(image)" class="hover-shadow">
  </div>
</div>

该方案完全保留你原有响应式规则，小屏自动适配1列/2列布局，无需额外逻辑。 #

方案2：手动按行拆分数组（适合需要单独控制每行逻辑的场景） #

如果需要给每行添加独立样式、交互逻辑，先在TS文件中将图片数组按4张一组拆分：

// 组件类中添加分组计算属性
get galleryGroups() {
  const result = [];
  for (let i = 0; i < this.gallery.length; i += 4) {
    result.push(this.gallery.slice(i, i + 4));
  }
  return result;
}

再修改模板，先循环行，再循环每行内的图片：

<div class="row" *ngFor="let group of galleryGroups">
  <div class="col-xs-12 col-s-6 col-4 col-l-3" *ngFor="let image of group">
    <img (click)="openModal()" [src]="getSanitizeUrl(image)" class="hover-shadow">
  </div>
</div>

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