создать секундомер в угловой 6

Question

Я использую угловой.Я хочу реализовать секундомер.У меня есть список, который состоит из одного или нескольких объектов.У меня есть таймер запуска и окончания кнопки таймера для каждого элемента.когда я нажимаю на кнопку «Пуск», это запускает таймер для определенного элемента, а когда я нажимаю на кнопку «Завершить таймер», это должно приостанавливать таймер, чтобы я мог перезапустить время.но только один таймер должен работать одновременно.если запускается таймер «Элемент A» и если нажать кнопку «Таймер запуска» на элементе B, он должен приостановить предыдущий таймер и запустить новый таймер для элемента B.

allUserTaskArr = [
    {
      'name': 'abc',
     'id':1,
     'start': true,
     'end': false
    },
     {
      'name': 'xyz',
     'id':1,
     'start': true,
     'end': false
    }

  ];
 
 startTask (item) {
    if(item.start) {
      item.end =  true;
      item.start= false;
    } 
  }

  EndTask (item) {
    if(item.end) {
      item.end =  false;
      item.start= true;
    }
  }

<div class="row no-gutters">
  <div class="card width hr" *ngFor="let item of allUserTaskArr">
    <div class="card-header">
      {{item.due | date}}
    </div>
    <div class="card-body pad-125">
      <div class="row no-gutters">
        <div class="col-md-12">
          {{item.name}}
          <div class="float-right">
            <button class="btn btn-info mar-l-r-0-5" *ngIf="item.start" (click)="startTask(item)">Start Timer</button>
            <button class="btn btn-danger mar-l-r-0-5" *ngIf="item.end" (click)="EndTask(item)">End Timer</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Вам нужно будет создать таймер, на который можно наблюдать, на который вы можете подписаться.В обратном вызове выполните действие.Например:

в компоненте:

import { timer } from "rxjs";

ngOnInit() {
    timer(0, 1000).subscribe(ellapsedCycles => {
      if(this.isRunning) {
        this.time--;
      }
    });
  }

toggleTimer() {
    this.isRunning = !this.isRunning;
  }

и в шаблоне:

<button (click)="toggleTimer()">Toggle timer</button>
<div>{{ time }}</div>

Answer 2

Создайте таймер, который увеличивается в секунду, затем преобразуйте время в формат отображения

   timer(0, 1000).subscribe(ec => {
          this.time++;
          this.timerDisplay = this.getDisplayTimer(this.time);
        });

getDisplayTimer(time: number) {
    const hours = '0' + Math.floor(time / 3600);
    const minutes = '0' + Math.floor(time % 3600 / 60);
    const seconds = '0' + Math.floor(time % 3600 % 60);

    return {
      hours: { digit1: hours.slice(-2, -1), digit2: hours.slice(-1) },
      minutes: { digit1: minutes.slice(-2, -1), digit2: minutes.slice(-1) },
      seconds: { digit1: seconds.slice(-2, -1), digit2: seconds.slice(-1) },
    };
  }`

Answer 3

Вы запускаете и заканчиваете один и тот же таймер, потому что вы передаете текущий item цикла foreach.Таким образом, вы изменяете свойства одного и того же элемента / таймера.

Чтобы исправить это, вам нужно найти элемент / таймер, который в данный момент работает, поэтому для метода startTask сделайте следующее:

startTask (item) {
   // Find current running timer
   var runningTimer = this.allUserTaskArr.find(ti => ti.start === true);
   // Stop this timer
   runningTimer.start = false;
   runningTimer.end = false;

   // Start the timer you pressed
   item.start = true;
}