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

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