Angular2時鐘每秒更新

我遵循了Tour of Heroes教程，現在我正在修改項目。我的項目將有很多時鐘和定時器，而我的第一個任務是製作一個顯示UTC時間的時鐘。隨着MomentModule，我能夠與顯示頁面加載的時間：Angular2時鐘每秒更新

<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（）;每一秒？無論哪種方式，是否有一種方法可以通過類似可觀察或類似的方式每秒更新我的視圖中的時間？就像我說的，當我的頁面完成時，我會有很多定時器和時鐘。謝謝！

來源

2017-03-13 Christian

您可以查看這裏我plunker比如http： //plnkr.co/HaTd8q，我用rxjs來實現定時器庫，源碼在github https://github.com/J-Siu/ng2-simple-timer –

你只需要使用arrowfunction而是採用了傳統的function callback語法如下圖所示，

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

來源

2017-03-13 04:36:49 micronyks

謝謝！至於新的日期（）每秒鐘，是否會堵塞內存？或者是追蹤時間的合理方法？ – Christian

這是傳統的javascript/typescript方式。您可以使用'Rxjs'庫來更好地實現。 – micronyks

這解決了這個問題的原因是，對於'傳統回調'，'this'的值不是父對象，而是可能是'window'。所以它就像你在做'window.myDate'添加箭頭函數允許編譯器用'_this'替換'this'，這是對父對象的引用（包含'myDate'屬性的對象） –

-1

使用：

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

來源

2018-01-05 11:11:52 Shubhranshu

Angular2時鐘每秒更新

回答

相關問題