單擊時如何重置我在Angular中創建的計時器？

我正在創建一個小應用程式，一旦我在輸入欄位內寫下所述活動，它就會跟蹤我在特定時間跨度內完成的活動，一旦我點擊“確定”，它應該出現在串列中。

我被困在單擊“確定”按鈕后我應該如何繼續重置計時器，所以基本上我應該在“resetTimer（）”函式中添加什么，該函式應該在每次我在串列中添加任務時觸發.

HTML：

<div class="modalbox" [class.active]="modalboxActive">
  <div class="modal">
    <p>What did you do?</p>

    <input type="text" [(ngModel)]="activity.name" />
    <button (click)="addTask()" [disabled]="activity.name === ''">OK</button>
  </div>
</div>
<div class="boxSuper">
  <div class="boxLeft">
    <div class="containerUp">
      <button id="start" (click)="startTimer()">START</button>
      <button id="pause" (click)="pauseTimer()">PAUSE</button>
      <button id="stop" (click)="stopTimer()">STOP</button>
    </div>
    <div class="containerDown">
      <p>{{ display }}</p>
    </div>
  </div>
  <div class="boxRight">
    <div class="containerLeft"></div>
    <div class="containerRight">
      <ul class="listElement" *ngFor="let item of tasks">
        <li>
          Activity:
          <span>{{ item.name }}</span>
          Length:
          <span>{{ item.length }}</span>
        </li>
      </ul>
    </div>
  </div>
</div>

TS：

import { importExpr } from '@angular/compiler/src/output/output_ast';
import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';
import { Activity } from '../activity';
import { Result } from '../result';

@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.css'],
})
export class TimerComponent implements OnInit {
  ngOnInit() {}
  time: number = 0;
  display: string | undefined;
  interval: any;
  modalboxActive = false;

  activity: Activity = {
    name: '',
  };

  tasks: Result[] = [];

  addTask() {
    var el: Result = {
      name: this.activity.name,
      end: '',
      start: '',
      length: this.display,
    };

    this.tasks.push(el);
    this.activity.name = '';
    this.modalboxActive = false;
    this.resetTimer();
  }

  resetTimer() {
    console.log('reset');
  }

  startTimer() {
    console.log('go');
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time  ;
      } else {
        this.time  ;
      }
      this.display = this.transform(this.time);
    }, 1000);
  }
  transform(value: number): string {
    var sec_num = value;
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - hours * 3600) / 60);
    var seconds = sec_num - hours * 3600 - minutes * 60;
    return hours   ':'   minutes   ':'   seconds;
  }
  pauseTimer() {
    clearInterval(this.interval);
  }
  stopTimer() {
    this.modalboxActive = true;
    clearInterval(this.interval);
    console.log('show');
  }
}

結果界面：

export interface Result {
  start: string | undefined;
  end: string | undefined;
  length: string | undefined;
  name: string | undefined;
}

uj5u.com熱心網友回復：

如果您只是嘗試將其重置為 0，則您需要做的就是：

resetTimer(){
   this.time = 0;
}

標籤：html 有角的 打字稿

上一篇：按行分組的PrimeNg表不顯示新記錄

下一篇：如何使用正則運算式將字串的一部分捕獲到組中？