html - 单击时如何更改文本和按钮图像(或按钮)

Question

我正在使用 Angular 。当我点击一个按钮时，我会得到一个带有一些选择的下拉菜单。单击按钮时如何更改按钮图像或按钮和文本？目标是让它在再次被点击时恢复到原来的状态。

我把图片留在这里是为了更好地理解。

在我的案例中，按钮将是一张图片。

我想要的是:我单击按钮并打开下拉菜单，在该下拉菜单中，当我单击“开始”时，我希望更改按钮(或按钮)的图像并将“开始”设置为“暂停”。如果您再次执行相同的操作，则会发生相反的情况……也就是说，如果您有暂停，按下它会更改按钮，暂停变为开始。

这可能吗？谁能帮帮我？

例子，我的代码

Codepen

HTML

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
     <img src="">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item">Start</a>
      <a class="dropdown-item">Add new</a>
    </div>
  </div>

我正在使用 angular，如果有人可以帮助我使用他们的资源获得解决方案，我非常感谢

Answer 1

使用变量存储当前状态并使用它的值切换 View 。

app.component.ts:

currentState : string = 'pause'

app.component.html :

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <!-- Image is to be shown by default -->
        <img src="1.png" *ngIf="currentState=='pause'"">
        <!-- Image is to be shown on clicking start -->
        <img src="2.png" *ngIf="currentState=='start'"">
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" (click)="currentState='start'">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start'" (click)="currentState='pause'">Pause</a>
    </div>
</div>