Aktualisierung der Angular2-Uhr jede Sekunde

Question

Ich habe das Tour of Heroes-Tutorial verfolgt und bin gerade dabei, das Projekt zu ändern. Mein Projekt wird viele Uhren und Timer haben, und meine erste Aufgabe ist es, eine Uhr zu machen, die die UTC-Zeit anzeigt. Mit dem MomentModule, ich bin in der Lage, den Zeitpunkt der Seite zu laden anzuzeigen:

<p>{{ myDate | amDateFormat: 'ddd Do HH:mm:ss' }}</p> 

Allerdings ist es nicht in jeder Sekunde aktualisiert werden, wie ich es will.

Mein DashboardComponent sieht wie folgt aus:

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

Also zunächst einmal ist es eine gute Idee, neue Datum zu erstellen(); jede Sekunde? Wie auch immer, gibt es eine Möglichkeit, die Zeit in meiner Ansicht jede Sekunde durch etwas wie eine beobachtbare oder ähnliche zu aktualisieren? Wie ich schon sagte, ich werde eine Menge Timer und Uhren auf meiner Seite haben, wenn es fertig ist. Vielen Dank!

Answer 1

Sie müssen nur arrowfunction verwenden, anstatt eine traditionelle function callback Syntax verwenden, wie unten dargestellt,

setInterval(() => {   //replaced function() by()=> 
    this.myDate = new Date(); 
    console.log(this.myDate); // just testing if it is working 
}, 1000); 

Answer 2

es funktioniert:

ngOnInit() { 
    this.todayDate = setInterval(() => { 
     this.todayDate = new Date(); 
    }, 1000); 
}