时间戳

首页 > 解决方案 > 防止点击另一个按钮，直到它停止

angular - 防止点击另一个按钮，直到它停止

问题描述

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

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

另一个问题是，当您停止第一个按钮的计时器并启动第二个按钮时，在那条线上可以看到前一个按钮的时间，然后是 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>

组件.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();
  }

标签： angulartypescript

解决方案

为了防止点击动作，您可以在按钮上使用 [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

推荐阅读