Angular商品图库点击小图仅替换对应大图问题排查与解决

问题根源在于所有商品共用了同一个currentGalleryImg变量，导致一处修改全局变化。要让每个商品独立控制自己的主图，只需给每个商品绑定专属的当前图片属性：

步骤1：初始化商品的默认主图 #

在组件的逻辑代码中（比如ngOnInit或者获取商品数据的方法里），给每个商品添加currentImg属性，默认设为该商品的第一张图片：

// 假设你已经获取到products数据
this.products.products.forEach(product => {
  // 默认显示商品的第一张缩略图作为主图
  product.currentImg = product.images[0];
});

步骤2：修改模板代码 #

把共用的全局变量替换为每个商品自己的currentImg属性，同时更新点击事件和选中样式的判断逻辑：

<div class="row">
<div *ngFor="let product of products.products" class="col col-12 col-md-6 col-lg-4 p-3 gallery-col">
    <!-- 绑定当前商品的currentImg -->
    <img class="img-fluid" [src]="'assets/img/' + product.currentImg">

    <div class="d-flex justify-content-around mt-2">
        <img *ngFor="let img of product.images; let idx=index" class="img-fluid" src="assets/img/{{img}}"
            style="width: 47.4px;" 
            <!-- 点击时传递当前商品和选中的图片 -->
            (click)="setCurrentGalleryImg(product, img)"
            <!-- 判断当前图片是否是商品选中的主图 -->
            [ngClass]="{'gallery-product-selected': product.currentImg === img }">
    </div>
</div>

步骤3：更新点击事件方法 #

修改组件中的setCurrentGalleryImg方法，只更新当前点击商品的currentImg：

setCurrentGalleryImg(product: any, img: string) {
  // 仅修改当前商品的主图路径
  product.currentImg = img;
}

这样修改后，每个商品都有独立的主图状态，点击某个商品的缩略图只会替换该商品自己的主图，不会影响其他商品。

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