сделать уникальный таймер для каждого элемента ngFor

Question

Я использую угловой.Я создал собственный секундомер.Я управляю кнопкой начала / окончания для каждого элемента ngFor.но не в состоянии управлять уникальным таймером для каждого элемента ngFor.

на изображении выше, у меня разные кнопки начала / конца каждого элемента.когда я нажимаю кнопку запуска таймера элемента A, таймер запускается для обоих элементов.

public seconds = 0; minutes = 0; hours = 0; t; h1 = "00:00:00";

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

    this.timer()
  }

  EndTask (item) {
    if(item.end) {
      item.end =  false;
      item.start= true;
    }
    clearTimeout(this.t);
  }
  
  
  add() {
    this.seconds++;
    if (this.seconds >= 60) {
        this.seconds = 0;
        this.minutes++;
        if (this.minutes >= 60) {
            this.minutes = 0;
            this.hours++;
        }
    }
    
    this.h1 = (this.hours ? (this.hours > 9 ? this.hours : "0" + this.hours) : "00") + ":" + (this.minutes ? (this.minutes > 9 ? this.minutes : "0" + this.minutes) : "00") + ":" + (this.seconds > 9 ? this.seconds : "0" + this.seconds);
    
    this.timer();
}

timer() {
    this.t = setTimeout(() => {
      this.add()
    }, 1000);
}

reset() {
  this.h1 = "00:00:00";
  this.seconds = 0; 
  this.minutes = 0; 
  this.hours = 0;
}

<div class="row no-gutters">
  <div class="card width hr" *ngFor="let item of allUserTaskArr">
    <div class="card-header">
      <span>{{item.due | date}}</span>
      <span class="float-right font-weight-bold">{{h1}}</span>
    </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</button>
            <button class="btn btn-danger mar-l-r-0-5" *ngIf="item.end" (click)="EndTask(item)">End</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я хочу, чтобы при нажатии на кнопку запуска элемента A. таймер должен запускаться для элемента A., когда таймер для элемента A запускается и Iнажмите на кнопку запуска пункта B, предыдущий таймер должен остановиться, и новый таймер должен запуститься.на самом деле, я хочу сохранить время.

Answer 1

Поскольку у вас есть несколько раз, вам нужно несколько счетчиков.

Прежде чем показать, как использовать несколько счетчиков, я предлагаю вам использовать объект Date и [DatePipe] из Angular для отображения часов: минут: секунд

time=new Date(2000,1,1,0,0,0,0);
{{time | date:'HH:mm:ss'}}

Итак, вам нужно, чтобы у ваших элементов было два свойства: isRunning и time.

Ваша функция add () становится

add()
{
    this.items.forEach((item:any)=>{  //for each item
        if (item.isRunning)   //if is running
        {
          console.log(item.time)
          item.time=new Date(item.time.getTime()+1000);
        }
    })
}

И ваши startTask и EndTask должны учитывать, еслиуже работает один счетчик

startTask (item) {
   item.time=new Date(2000,1,1,0,0,0,0);  //initiazlize the date
   if (this.items.find((x:any)=>x.isRunning)) //if some is running
      item.isRunning=true; //Simply push item.running=true
   else
   {
      item.isRunning=true;
      this.timer()   //begin the timer too
   }
}
EndTask (item) {
  item.isRunning=false;
  if (!this.items.find((x:any)=>x.isRunning)) //if nobody is running
    clearTimeout(this.t);
  }

Для таймера вы используете setInterval, мы должны использовать таймер Rxjs для управления отпиской (TODO)

 timer() {
    this.t = setInterval(() => {
      this.add()
    }, 1000);
  }