状态更改时交换按钮图像

Question

我正在测试按钮状态的更改，但是我遇到了一些困难。

我正在尝试为按钮处于自然状态（暂停）时设置图像。当我单击一行上的按钮时，将打开一个下拉列表，并且我想单击该行上的开始，则该按钮会更改在“开始”状态下设置的图像。我的问题是没有图像出现，有人知道我可能做错了吗？

这时计数器可以同时有多个...如果您先激活一个按钮（单击开始），然后在另一行上，则可以...如果单击启动，但是在另一个按钮上，一种停止第一个注册并从第二个开始注册的方法？

谢谢！

我的代码stackblitz

html

<button id="button-basic" dropdownToggle aria-controls="dropdown-basic">
    <img *ngIf="taskService.timerForUsers.currentState === 'pause'" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcW6cJlI-KlS721hkuHDTMydZ_snrkhL9sm9wYHWRhd3FlvF1b&s">
    <img *ngIf="taskService.timerForUsers[data.key.id]?.currentState ==='start'"
    src="https://png.pngtree.com/png-clipart/20190516/original/pngtree-pause-vector-icon-png-image_3791321.jpg">
    <img *ngIf="!taskService.timerForUsers[data.key.id]?.currentState ==='start'"
    src="https://png.pngtree.com/png-clipart/20190516/original/pngtree-pause-vector-icon-png-image_3791321.jpg">
  </button>
        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
            <li role="menuitem"><a class="dropdown-item"
                    *ngIf="!taskService.timerForUsers[data.key.ID] || taskService.timerForUsers[data.key.ID].currentState === 'pause'"
                    routerLinkActive="active" (click)="startTimer(data)">Start</a></li>
            <li role="menuitem"><a class="dropdown-item"
                    *ngIf="taskService.timerForUsers[data.key.ID]?.currentState === 'start'" routerLinkActive="active" (click)="pauseTimer(data)">Stop</a></li>
        </ul>
    </div>

Component

  startTimer(data) {
    this.taskService.startTimer(data.key.ID);
  }

  pauseTimer(data) {
    this.taskService.pauseTimer(data.key.ID);
  }

Answer 1

如下更改button部分，