web-dev-qa-db-ja.com

Angular2クロックは毎秒更新

私はヒーローズツアーのチュートリアルを実行しましたが、現在プロジェクトの変更を行っています。私のプロジェクトにはたくさんの時計とタイマーがあり、最初の仕事は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);
    }
}

まず最初に、新しいDate（）を作成することは良い考えです。毎秒？いずれにせよ、オブザーバブルなどのようなものを介して私のビューの時間を毎秒更新する方法はありますか？先ほど言ったように、ページが完成すると、たくさんのタイマーと時計がページに表示されます。ありがとう！

angularangular-moment
6
Christian

以下に示すように、従来のfunction callback構文を使用する代わりに、arrowfunctionを使用する必要があるだけです。

setInterval(() => {         //replaced function() by ()=>
  this.myDate = new Date();
  console.log(this.myDate); // just testing if it is working
}, 1000);
17
micronyks
export class DateComponent implements OnInit {
  dateMessage : String;

  constructor() {

  setInterval(() => {         
    let currentDate=new Date();
    this.dateMessage = currentDate.toDateString()+' '+ currentDate.toLocaleTimeString();
  }, 1000);
}
0
Niroshan Ratnayake