Question

我正在制作产品缩略图库，并希望显示用户点击的缩略图作为主图像。我是用Angular做的，但我对这个框架还不熟悉。

product.html

<img src="{{mainImage}}">

<div class="thumbnails">        
        <img src="{{image1}}" (click)="changeMainImg()">
        <img src="{{image2}}" (click)="changeMainImg()">
</div>

product.ts

public mainImage;

public image1 = "http://via.placeholder.com/100x100";
public image2 = "http://via.placeholder.com/100x200";

public changeMainImg(event){
    this.mainImage = "http://via.placeholder.com/100x100";
}

对于部分

this.mainImage = "http://via.placeholder.com/100x100";

我希望this.mainImage等于image1或image2，具体取决于选择的缩略图。

Answer 1

只需将所选图像传递给该功能并分配

即可

<div class="thumbnails">        
        <img src="{{image1}}" (click)="changeMainImg(image1)">
        <img src="{{image2}}" (click)="changeMainImg(image2)">
</div>

和TS

changeMainImg(image:any){
    this.mainImage = image;
}

<强> DEMO

显示用户使用Angular2单击作为主图像的缩略图

1 个答案: