为每个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的计时器启动并单击项目B的开始按钮时，上一个计时器应暂停，而新计时器应开始。实际上，我想节省时间。

Answer 1

由于您有几次，所以需要几个计数器。

在展示如何使用数字计数器之前，建议您使用Angular中的Date对象和[DatePipe]来显示小时：分钟：秒数

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