Question

我有两个按钮可以让我开始/暂停时间计数。

我遇到两个无法解决的问题：( 当我单击一个按钮时，时间开始计数，是否有办法“锁定”（不使另一个按钮消失）另一个按钮，直到停止开始计数的那个按钮为止？也就是说，当我单击一个按钮时，只有在第一个按钮停止时才能启动另一个按钮。

另一个问题是，当您停止第一个按钮的计时器并启动第二个按钮时，在该行上可以看到上一个按钮的时间，然后从0开始倒数，这是一种方法以前的计数可以消失吗？

HTML

 <div *ngFor="let data of datas">
    <div>
        <div class="row" style="margin-top: 7px;">
            <button type="button" data-toggle="dropdown" class="btn ClassPlay">
                <img style="width: 35px;" *ngIf="taskService.currentState=='pause' && data.key.atrasada == 0" src="https://img.icons8.com/flat_round/64/000000/play--v1.png">
                <img style="width: 35px;" *ngIf="taskService.currentState=='pause' && data.key.atrasada == 1" src="https://img.icons8.com/cotton/64/000000/circled-play.png">
                <div *ngIf="taskService.currentState=='start'">
                    <img style="width: 38px;" *ngIf="taskService.currentRowIndex === data.rowIndex && data.key.atrasada == 0" src="https://img.icons8.com/carbon-copy/100/000000/youtube-play.png">
                    <img style="width: 38px;" *ngIf="taskService.currentRowIndex === data.rowIndex && data.key.atrasada == 1" src="https://img.icons8.com/doodle/48/000000/youtube-play.png">
                    <img style="width: 38px;" *ngIf="taskService.currentRowIndex != data.rowIndex" src="https://img.icons8.com/ios-glyphs/30/000000/circled-play.png">
                </div>
            </button>
            <div>
                <a class="dropdown-item" *ngIf="taskService.currentState == 'pause' ||taskService.currentRowIndex !== data.rowIndex " routerLinkActive="active" (click)="taskService.currentState='start'; startTimer(data)">Start</a>
                <a class="dropdown-item" *ngIf="taskService.currentState == 'start' && taskService.currentRowIndex === data.rowIndex" routerLinkActive="active" (click)="taskService.currentState='pause'; pauseTimer(data)">Stop</a>
            </div>
            <div class="timer" *ngIf="taskService.currentRowIndex === data.rowIndex">
                <span>{{(taskService.fetchDisplay() * 1000) | date:'HH:mm:ss':'UTC'}}</span>
            </div>
        </div>
    </div>
</div>

Component.ts

  startTimer(data) {
    this.taskService.currentRowIndex = data.rowIndex;

    this.taskService.startTimer();
    this.currentState = this.taskService.getCurrentState();
  }

  pauseTimer(data) {
    this.taskService.currentRowIndex = data.rowIndex;
    this.taskService.pauseTimer();
    this.currentState = this.taskService.getCurrentState();
  }

Answer 1

要防止点击动作，您可以在按钮上使用[disabled]

<button class="dropdown-item" *ngIf="taskService.currentState == 'pause' ||taskService.currentRowIndex !== data.rowIndex " routerLinkActive="active" 
       [disabled]="taskService.currentState == 'start'"
        (click)="taskService.currentState='start'; startTimer(data)">Start</button>

为避免在新计时器上显示旧值，可以在设置计时器的位置将显示设置为0。

   pauseTimer() {
    this.currentState = "pause";
    clearInterval(this.interval);
    this.time = 0;
    this.display = 0;
  }

您可以在这里看到工作示例 https://angular-xn5gvl-rvvdk1.stackblitz.io

Answer 2

尝试这样：

.ts

  isStart:boolean = false

  startTimer(data) {
    this.isStart = true
    ...
  }

  pauseTimer(data) {
    this.isStart = false
    ...
  }

.html

<a  [class.disabled]="isStart" *ngIf="taskService.currentState == 'pause' ||taskService.currentRowIndex !== data.rowIndex " routerLinkActive="active"  (click)="taskService.currentState='start'; startTimer(data)">Start</a>

.css

.disabled {
    pointer-events: none;
    opacity: 0.6;
}

Working Demo

防止点击另一个按钮直到停止

2 个答案: