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

Question

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

我将图像留在这里以更好地理解。

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

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

有可能吗？谁能帮我吗？

示例，我的代码

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

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

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>

Answer 2

向onChange添加一个函数，然后在其中执行

<div class="dropdown">
    <button (change)="changeImg()" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
     <img src="{{imgSrc}}">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" *ngIf="isStarted">Start</a>
      <a class="dropdown-item" *ngIf="!isStarted">Pause</a>
      <a class="dropdown-item">Add new</a>
    </div>
  </div>

以ts

    isStarted:boolean = false; // default to pause
    imgSrc:any;
    changeImg(){
     // We can even write the simplest code instead the below line.
     // isStarted = false ? true : false;
     isStarted = !isStarted;
     imgSrc = isStarted ? startImageSrc : pauseImageSrc; 
    }

希望此方法有效，没有进行测试:)