html - 单击 Angular 6 中的按钮后如何用另一个图像替换图像？

Question

我有一个包含图像和名称的按钮。单击该按钮后，我需要替换图像和内容。我在下面给出了我的代码。

<div class="btn-default">
  <button name="Save" [ngClass]="[bntStyle]" (click)="submit()">
   <img class="img1" src="./image1.png"/><a 
   class="sidebarlinks" >Content1</a>
  </button>
</div>

同样，我还有几个按钮。

我的 ts 文件:

 submit() {
   this.bntStyle = 'btn-change';
}

我的 CSS 文件:

.btn-change {
 background-image: url("./image1_after_click.png");
}

有人可以帮我解决这个问题吗？

Answer 1

您需要从 ngClass 值中删除 []

<button name="Save" [ngClass]="bntStyle" (click)="submit()">