Angular2 时钟每秒更新一次
Angular2 clock update every second
我已经按照英雄之旅的教程学习了,现在正在修改项目。我的项目会有很多时钟和定时器,我的第一个任务是制作一个显示UTC时间的时钟。使用 MomentModule,我可以显示页面加载时间:
<p>{{ myDate | amDateFormat: 'ddd Do HH:mm:ss' }}</p>
但是,它并没有像我希望的那样每秒更新一次。
我的 DashboardComponent 看起来像这样:
export class DashboardComponent implements OnInit {
heroes: Hero[] =[];
myDate: Date;
constructor(private heroService: HeroService) {}
ngOnInit(): void {
this.heroService.getHeroes()
.then(heroes => this.heroes = heroes);
this.utcTime();
}
utcTime(): void {
setInterval(function() {
this.myDate = new Date();
console.log(this.myDate); // just testing if it is working
}, 1000);
}
}
所以首先,创建 new Date() 是个好主意吗?每一秒?无论哪种方式,有没有办法通过可观察或类似的东西每秒更新我视图中的时间?就像我说的,完成后我的页面上会有很多计时器和时钟。谢谢!
您只需要使用 arrowfunction
而不是使用传统的 function callback
语法,如下所示,
setInterval(() => { //replaced function() by ()=>
this.myDate = new Date();
console.log(this.myDate); // just testing if it is working
}, 1000);
我已经按照英雄之旅的教程学习了,现在正在修改项目。我的项目会有很多时钟和定时器,我的第一个任务是制作一个显示UTC时间的时钟。使用 MomentModule,我可以显示页面加载时间:
<p>{{ myDate | amDateFormat: 'ddd Do HH:mm:ss' }}</p>
但是,它并没有像我希望的那样每秒更新一次。
我的 DashboardComponent 看起来像这样:
export class DashboardComponent implements OnInit {
heroes: Hero[] =[];
myDate: Date;
constructor(private heroService: HeroService) {}
ngOnInit(): void {
this.heroService.getHeroes()
.then(heroes => this.heroes = heroes);
this.utcTime();
}
utcTime(): void {
setInterval(function() {
this.myDate = new Date();
console.log(this.myDate); // just testing if it is working
}, 1000);
}
}
所以首先,创建 new Date() 是个好主意吗?每一秒?无论哪种方式,有没有办法通过可观察或类似的东西每秒更新我视图中的时间?就像我说的,完成后我的页面上会有很多计时器和时钟。谢谢!
您只需要使用 arrowfunction
而不是使用传统的 function callback
语法,如下所示,
setInterval(() => { //replaced function() by ()=>
this.myDate = new Date();
console.log(this.myDate); // just testing if it is working
}, 1000);