状态更改时交换按钮图像答案

【问题标题】：Swap button image when state changes状态更改时交换按钮图像
【发布时间】：2020-01-01 11:51:02
【问题描述】：

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

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

谢谢！

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>

【问题讨论】：

标签： angular typescript

【解决方案1】：

如下更改您的 button 部分，

我还添加了height 和width 属性以便更好地查看图像。

<button id="button-basic" dropdownToggle aria-controls="dropdown-basic">
    <img *ngIf="taskService.timerForUsers[data.key.ID]?.currentState === 'pause' || taskService.timerForUsers[data.key.ID] == undefined" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcW6cJlI-KlS721hkuHDTMydZ_snrkhL9sm9wYHWRhd3FlvF1b&s" width="50" height="50">
    <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" width="50" height="50">
    <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" width="50" height="50">
</button>

【讨论】：

在按钮工作的情况下，但是在没有任何时间戳的用户中，按钮不会出现，在剩余的工作中:(
时间戳是什么意思？在什么情况下它不起作用？
我在帖子中放了一张图片......用户“Cristiano”......没有按钮，因为从来没有开始时间:(
更新了我的答案。请检查。在start中添加了|| taskService.timerForUsers[data.key.ID] == undefined
这非常有效！你知道如何在另一个计时器运行时停止计时器吗？我不打算同时运行几个。非常感谢您的帮助！