Angular 10个加号

Question

loadingPercent: number = 0;

  ngOnInit(): void {
    window.setInterval(function() {
      console.log(loadingPercent + 10);
    }, 1000);
  }

我试图每秒简单地加 10，但我得到的答案是 NaN。 Angular 10. 为什么简单的加法这么难？

Answer 1

setInterval 函数内部发生了什么？您没有访问 class 范围。

这可以通过三种方式解决。

选项 1：

将 arrow function 用于 setInterval，这将明确地将 setInterval 内的范围绑定到您的 class 范围。

ngOnInit(): void {
  setInterval(() => {
    this.increment();
  }, 1000);
}

increment() {
  this.loadingPercent = this.loadingPercent + 10;
  console.log(this.loadingPercent);
}

工作Fiddle

如果不使用箭头函数，需要手动绑定作用域

选项 2

 loadingPercent = 0;

 ngOnInit(): void {
    var that = this;
    setInterval(function() {
        that.increment();
    }, 1000);
  }

increment() {
    this.loadingPercent = this.loadingPercent + 10;
    console.log(this.loadingPercent);
}

工作Fiddle。

选项 3

  loadingPercent = 0;

  ngOnInit(): void {
      setInterval(this.increment.bind(this), 1000);
  }

  increment() {
      this.loadingPercent = this.loadingPercent + 10;
      console.log(this.loadingPercent);
  }

工作Fiddle。

Angular 10个加号

Angular 10 adding numbers

javascript

typescript

angular10