ワンクリックでポーズボタンを無効にする方法と、angle2とtypescriptを使用してポップアップを表示するとすぐに有効にする方法

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

コード。上記のテンプレートでは変更は必要ありません。

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!'); 
     }) 
} 

これらの解決策の違いはあまりありません。 finallyオペレータは、特にローディングインジケータを表示するときに非常に便利なので、よく知っておいてください。

Answer 2

は、私は右のあなたを理解している場合、あなたはこのようにそれを行うことができます：

：

あなたが好きなあなたのコンポーネントでヘルパー変数を導入する可能性

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に設定します。要求されたとして.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) 
     .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 
     }) 
}