intervalが値を取得しようとした後、javascript/angular 4プロパティが定義されていません

Question

タイマーを作成しようとしていますが、動作しません。 私はタイマーを始めるボタンを持っています。それは開始時間を設定し、その後に画面上でカウントする間隔を開始します。しかし、開始時間が定義されていないため、インターバルによって呼び出される関数は失敗します。私は最初の時間が設定されているかどうかを調べるためにデバッグしました。しかし、それがインターバルを通して呼び出されるとき、それは未定義です。ここで

は、いくつかのプロパティ

timeBegan = new Date(); 
    started = null; 

スタート機能

start() { 
this.timeBegan = new Date(); 
document.getElementById('ticker').innerHTML = '00:00:00.000'; 

this.started = setInterval(this.clockRunning, 10); 
    } 

clockrunning機能

public clockRunning() { 
const currentTime = new Date(); 
console.log(this.timeBegan); 
console.log(currentTime.getTime()); 
const timeElapsed = new Date(currentTime.getTime() - this.timeBegan.getTime()); 
const hour = timeElapsed.getUTCHours(); 
const min = timeElapsed.getUTCMinutes(); 
const sec = timeElapsed.getUTCSeconds(); 
const ms = timeElapsed.getUTCMilliseconds(); 

console.log(currentTime.getSeconds()); 
console.log(this.timeBegan); 
document.getElementById('ticker').innerHTML = 
    (hour > 9 ? hour : '0' + hour) + ':' + 
    (min > 9 ? min : '0' + min) + ':' + 
    (sec > 9 ? sec : '0' + sec) + '.' + 
    (ms > 999 ? ms : ms > 9 ? '0' + ms : '000' + ms); 


} 

は私が間違って何をやっている私のコード のですか？それは間違いなくあなたの問題を解決します

this.started = setInterval(function(e){ 
     this.clockRunning(); 
}.bind(this), 10); 

：

this.started = setInterval(this.clockRunning.bind(this), 10); 

か：

Answer 1

はスタート機能でこのようにそれを使用してください。あなたが参照しているので

Answer 2

それが機能していません。

this.timeBegan 

はしかし、「これ」に参照のうえされていない「この」あなたはそれを参照したいです。 "this"はsetIntervalで定義された関数です。これは、ES5関数には独自の「this」があるからです。

「これ」を使用すると思われるES6機能を試してみることもできます。また

、「これは」あなたが実行して欲しいを参照するために、「この」あなたの関数内に強制：

this.clockRunning = this.clockRunning.bind(this) 

これは、「これは」clockRunning内常に「これは」に渡されることを意味しますバインド（）。あなたがtimeBeganプロパティを持っている "これ"をバインドするために正しい "this"を渡すことを確認してください。