使用* ngIf的活动类

Question

 <li (click)="leftMenuEvent(lMenu)"  *ngFor="let lMenu of leftMenuDetails" [ngClass]="{active: setleftActive(lMenu)}">
          <a><img alt="" [src]="lMenu.normalimg">{{lMenu.text}}</a></li>

我要做的是将[src]上的lMenu.selectedimg更改为[ngClass]={active} （即）：点击

Answer 1

以这种方式应用ngClass。

[ngClass]="{'active':setleftActive(lMenu)}"

更新

要更新[src]值：

[src]="flag ? lMenu.selectedimg : lMenu.normalimg"

当您单击

时，只需在其click事件上将其标记设置为true。

在.ts文件中

flag: any = false; // Dafault it will false. 


leftMenuEvent(event){
     this.flag = true;
}

注意：您可以使用setleftActive(lMenu)代替falg。两者都一样。

Answer 2

<li
  (click)="leftMenuEvent(lMenu)"
  *ngFor="let lMenu of leftMenuDetails"
  [ngClass]="{ active: setleftActive(lMenu) }"
>
  <a><img alt="" [src]="setleftActive(lMenu) ? lMenu.selectedimg : lMenu.normalimg" />{{ lMenu.text }}</a>
</li>

你是这个意思吗？

Answer 3

尝试这种方式

getImage(menu: lMenu) {

if (active) {
    return (menu.selectedimg);
  } else {
    return (menu.normalimg);
  }
}

HTML

 <a><img alt="" [src]="getImage(lMenu)">{{lMenu.text}}</a>