1

我正在使用角度。我创建了自定义秒表。我正在管理每个 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 的开始按钮时，前一个计时器应该暂停并且新计时器应该启动。其实，我想保持时间。

4

1 回答 1

0

由于您有多次，因此您需要多次计数器。

在展示如何使用多个计数器之前，我建议您使用来自 Angular 的 Date 对象和 [DatePipe] 来显示 hours:minutes:secconds

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);
  }
于 2019-03-04T16:54:56.113 回答