单击时如何更改文本和按钮图像（或按钮）

debugcn 发表于 Dev

哈里

我正在与角度。当我单击一个按钮时，会出现一些选择的下拉菜单。单击按钮时如何更改按钮图像或按钮和文本？目的是使其再次单击时返回其原始状态。

我将图像留在此处以更好地理解。

在我的情况下，该按钮将是图像。

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

有可能的？谁能帮我？

示例，我的代码

码笔

的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一起工作，如果有人可以帮助我使用他们的资源来获得解决方案，我真的很感激

Arcteezy

使用变量存储当前状态，并使用其值切换视图。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。