angular - 我正在尝试在 Typescript 中创建一个简单的计时器，在浏览器控制台中显示“this.pad 不是函数”，但我不明白为什么

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() {}
}

标签： angulartypescript

Answer 1

您在这里有一些解决方案：

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

或者：

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

原因是当你传入时setTime，你的对象实例setTimeout的this范围没有被保留。