如何使用角度 6 在图像标签中给出条件？

Question

我的网页包含，

      <ng-container *ngFor="let horizontal of categories">
            <ng-container *ngFor="let horizontalval of horizontal.items;let i=index">
          <button [ngClass]="{'selected-color' : i==selectedIndex }" 
          [ngStyle]="{'padding-top':horizontal.items[i].title==='Business'?'2.56%':(horizontal.items[i].title==='Plat' ? '2.56%':null)}"type="submit" class="btn1"  [id]="horizontal.items[i].title"
           (click)="changeImage(id);">
           <img [src]= horizontal.items[i].icon alt="image not found" class="icon"/>
           {{ horizontal.items[i].title }}
          </button>
        </ng-container>

我的 ts 文件：

 changeImage(option){
if(option == "Trans"){


    this.imgDefault = 'imgChange';
    console.log("this.imgDefault :",this.imgDefault);
}
 else if(option == "Col"){

    this.imgDefault = 'imgChange1';
    console.log("this.imgDefault :",this.imgDefault1);
}
else if(option == "Business"){
    this.imgDefault = 'imgChange2';
    console.log("this.imgDefault :",this.imgDefault2);
}

}

所以在我的 css 中，我保留了单击按钮时需要更改的图像。

.imgChange{
background-image: url('../assets/Trans_2.png');
color:blue;
 }
.imgChange1{
background-image: url('../assets/Trans_3.png');
color:blue;
 }
 .imgChange2{
background-image: url('../assets/Trans_4.png');
color:blue;
 }

如何在 img 标签中给出条件，以便点击按钮更改图像？

Answer 1

您应该在div 中添加image，如下所示：-

ts

      imgDefault = 'imgChange'; <-- default;

changeImage(option){
if(option == "Trans"){


    this.imgDefault = 'imgChange';
    console.log("this.imgDefault :",this.imgDefault);
}
 else if(option == "Col"){

    this.imgDefault = 'imgChange1';
    console.log("this.imgDefault :",this.imgDefault1);
}
else if(option == "Business Process Re-engineering"){
    this.imgDefault = 'imgChange2';
    console.log("this.imgDefault :",this.imgDefault2);
}

}

.html

 <ng-container *ngFor="let horizontal of categories">
 <ng-container *ngFor="let horizontalval of horizontal.items;let i=index">
 <button [ngClass]="{'selected-color' : i==selectedIndex }" 
 [ngStyle]="{'padding-top':horizontal.items[i].title==='Business'?'2.56%':(horizontal.items[i].title==='Plat' ? '2.56%':null)}"type="submit" class="btn1"  [id]="horizontal.items[i].title"click)="changeImage(id);">

{{ horizontal.items[i].title }}
 </button>
 </ng-container>  
</ng-container>  

<div [ngClass]="imgDefault"></div>

链接：-https://stackblitz.com/edit/angular6-sqemmd?file=app/app.component.html