我正在尝试在 Typescript 中创建一个简单的计时器，在浏览器控制台中它说"this.pad is not a function"，我不明白为什么

Question

我很清楚这对Angular不是很友好，事实上，我想从你那里知道一个更好的修复，使它更"Angular-y"如果可能的话，谢谢你。

export class TimerComponent implements OnInit {
min = 0;
sec = 0;
minutesLabel: any = document.getElementById('minutes'); 
secondsLabel: any = document.getElementById('seconds');
startTimer() {
const interval = setInterval(this.setTime, 1000); 
return interval;
}
setTime() {
++this.sec;
var r: any = this.sec / 60;
this.secondsLabel.innerHTML = this.pad(this.sec % 60);
this.minutesLabel.innerHTML = this.pad(parseInt(r));
}
pad(val: any) {
var valString = val + '';
if (valString.length < 2) {
return '0' + valString;
} else {
return valString;
}
}
constructor() {}
ngOnInit() {}
}

Answer 1

这里有几个解决方案:

setInterval(this. setTime.bind(this), 1000); 

或:

setInterval(() => this.setTime(), 1000); 

原因是当你把setTime传递给setTimeout时，你的对象实例的this作用域没有被保留。

Answer 2

这里有一个答案，也使它成为你所说的" angular -y ";

这使用了rxjs定时器，它类似于setTimeout，但更可配置，从prod使用，你将需要一些方法来取消订阅销毁。

我还简化了很多不需要的东西，并添加了更好的类型定义。

import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
minutesLabel: string;
secondsLabel: string;
ngOnInit() {
timer(0, 1000).subscribe((sec) => {
this.secondsLabel = this._pad(sec % 60);
this.minutesLabel = this._pad(Math.floor(sec / 60));
});
}
private _pad(val: number) {
var valString = val + '';
if (valString.length < 2) {
return `0${valString}`;
} else {
return valString;
}
}
}