javascript - 根据选定的传递参数， Angular 隐藏和显示图像

Question

我有一个下拉菜单:

<ul class="dropdown-menu">
    <li><a href="#" (click)="showSelectedImage(1)">Option 1</a></li>
    <li><a href="#" (click)="showSelectedImage(2)">Option 2</a></li>
    <li><a href="#" (click)="showSelectedImage(3)">Option 3</a></li>
</ul>

and I have 3 images:

<img class="hidden" src="image1.png" alt />
<img class="hidden" src="image2.png" alt />
<img class="hidden" src="image3.png" alt />

In app.component.ts I have this method:

showSelectedImage(image) {
    // ... 
}

我需要做的是，当从下拉菜单中选择图像时，我需要显示该图像并隐藏其他图像。

Answer 1

只需生成一张具有相应来源的图像:

<ul class="dropdown-menu">
    <li *ngFor="let i of [1,2,3,4,5,6]">
        <a href="#" (click)="showSelectedImage(i)">Option {{i}}</a>
    </li>
</ul>

<img src="image{{imageId}}.png" *ngIf="imageId" />

组件:

imageId:Number;

showSelectedImage(id){
    this.imageId = id
}