在angular 6中创建秒表
在angular 6中创建秒表
提问于 2019-03-04 19:47:47
我使用的是angular。我想实现秒表。我有一个由一个或多个对象组成的列表。我有一个开始计时器和每个项目的结束计时器按钮。当我点击start按钮时，这应该会启动特定项目的计时器&当我点击end timer按钮时，这应该会暂停计时器，以便我可以重新开始计时。但一次只能运行一个计时器。如果项目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>
回答 4
Stack Overflow用户
发布于 2019-03-04 20:37:20
您将需要创建一个计时器，它是您可以订阅的可观察对象。在回调中执行操作。例如：
在组件中：
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>Stack Overflow用户
发布于 2019-08-19 17:35:53
创建一个每秒增长的计时器，然后将时间转换为显示格式
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) },
};
}`Stack Overflow用户
发布于 2019-03-04 20:34:26
您正在启动和结束同一个计时器，因为您传递了foreach循环的当前item。因此，您可以更改同一项/计时器的属性。
要解决这个问题，您需要找到当前正在运行的项/计时器，因此对于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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54982625
复制相关文章
相似问题
腾讯云开发者
