时间戳

首页 > 解决方案 > 服务继续运行，但按钮状态发生变化

angular - 服务继续运行，但按钮状态发生变化

问题描述

我有一个数据表，在表的每一行中都有一个带按钮的列。为了只执行单击它的行的按钮，在开始/暂停计时器功能中，我传递了该行的索引，以便只执行该行的按钮。

我在服务中开发了这些功能，以便在更改页面时计时器继续工作而不会被破坏。

我的问题是，当我运行计时器并更改页面时，按钮状态会发生变化，即我单击播放，它变成绿色，当我更改页面并返回确认按钮状态时，它不是绿色。我认为我的问题是当我更改页面时它会丢失行索引，因为该服务继续工作。

有谁知道我该如何解决这个问题？

HTML

            <div class="row">
              <button type="button" data-toggle="dropdown" class="btn ClassPlay">                  
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
                  (click)="currentState='start'; startTimer(data)">Start</a>
                <a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
                  (click)="currentState='pause'; pauseTimer(data)">Stop</a>
              </div>
            </div>

标签： angulartypescript

解决方案

这是示例，请检查链接。

https://stackblitz.com/edit/angular-xn5gvl

我做了什么。

  1. 从服务中删除 trasform 方法并添加日期管道以显示格式时间'HH:mm:ss'

  2. 将currentRowIndex物业投入使用

  3. 将服务公开以将其用于这样的模板taskService.method()或taskService.property

  4. 添加clearIntervale到service.startTimer()

  5. 改变了startTimer()和pauseTimer()component.ts

  6. 请注意，您也需要替换*ngFor="let data of datas"为*dxTemplate="let data of 'cellTemplate'"和图像

推荐阅读