Question

我有一个计时器，其中有暂停按钮。一旦我点击暂停，它必须被禁用，直到弹出窗口出现并在弹出窗口出现后立即启用。请帮我解决这个问题。我在这里分享我的代码：

HTML：

<button md-icon-button class="trackingBtn active" mdTooltipPosition="below" mdTooltip="Resume" [disabled]="!this.isPermission || pauseDisable" (click)='resumeTimer(currentTask)' [hidden]='play'>
                            <md-icon svgIcon="play"></md-icon>
                        </button>

Answer 1

如果我理解你，你可以这样做：

您可以在组件中引入辅助变量，如：

private buttonDisabled: boolean;

然后禁用OR条件的按钮，如：

<button md-icon-button class="trackingBtn" mdTooltipPosition="below" mdTooltip="Pause"
[disabled]="!this.isPermission || buttonDisabled" // <--
*ngIf="play" (click)='pauseTimer(currentTask)'>

在pauseTimer()中，您在开头将其设置为true，并在功能完成后设置为false。

pauseTimer(currentTask) {
this.buttonDisabled = true; // <-- disable the button here
  var times = {
    "state":"pause",
    "date": new Date()
  };
  currentTask.times.push(times);
  var times_data = {
    "times":currentTask.times,
    "user_id":this.user_id,
    "company_id":JSON.parse(localStorage.getItem('company_id'))
  }
  this.ApiService
      .editEntry(currentTask._id,times_data)
      .subscribe(
        entry => {
          this.play = false; 
          this.toasterService.pop('success', 'Your task timer has been paused');
          this.buttonDisabled = false; // <-- enable the button again
          this.timerService.pauseTimer();
        },error => {
          this.toasterService.pop('error', 'Something went wrong!');
          this.buttonDisabled = false; // <-- enable the button again
        })
}

Answer 2

上述评论中的代码，根据请求使用.finally()运算符。上面建议的模板不需要进行任何更改。

在文件的开头添加import 'rxjs/add/operator/finally'和其他导入。

pauseTimer(currentTask) {
this.buttonDisabled = true; // <-- disable the button here
  var times = {
    "state":"pause",
    "date": new Date()
  };
  currentTask.times.push(times);
  var times_data = {
    "times":currentTask.times,
    "user_id":this.user_id,
    "company_id":JSON.parse(localStorage.getItem('company_id'))
  }
  this.ApiService
      .editEntry(currentTask._id,times_data)
      .finally(()=> {
          // Code inside this block will execute no matter if the observable fails or succeeds.
          this.buttonDisabled = false; // <-- enable the button again
      })
      .subscribe(
        entry => {
          this.play = false; 
          this.toasterService.pop('success', 'Your task timer has been paused');
          this.timerService.pauseTimer();
        },error => {
          this.toasterService.pop('error', 'Something went wrong!');
        })
}

这些解决方案之间没有太大区别。最后的操作符很有用，因为它经常派上用场，尤其是在显示加载指示器时。

如何在单击后禁用暂停按钮，并在使用angular2和typescript显示弹出窗口时立即启用

2 个答案: