Angular, как вызвать функцию с аргументом

Не могу разобраться, если вызывать this.varCount в качестве переменной у функции draw - в консоль выводит то что надо, а в DOM не хочет выводить:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  template: ` <p>Count: {{ varCount }}</p> `,
})
export class AppComponent implements OnInit {
  varCount = 0;
  startInterval: NodeJS.Timeout;

  ngOnInit() {
    const draw = (count: number) => {
      const start = () => {
        count++;
        console.log(count);

        if (count >= 100) {
          clearInterval(this.startInterval);
        }
      };
      this.startInterval = setInterval(start, 0);
    };

    draw(this.varCount);
  }
}

Но если вызывать this.varCount внутри самой функции, всё работает как надо

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  template: ` <p>Count: {{ varCount }}</p> `,
})
export class AppComponent implements OnInit {
  varCount = 0;
  startInterval: NodeJS.Timeout;

  ngOnInit() {
    const draw = () => {
      const start = () => {
        this.varCount++;
        console.log(this.varCount);

        if (this.varCount >= 100) {
          clearInterval(this.startInterval);
        }
      };
      this.startInterval = setInterval(start, 0);
    };

    draw();
  }
}

Но мне нужно именно через переменную вызывать, помогите пожалуйста


Ответы (1 шт):

Автор решения: RavenTheX

У вас this теряется во вложенной функции draw

  varCount = 0;
  startInterval: NodeJS.Timeout;

  ngOnInit() {
    let self = this
    const draw = () => {
      const start = () => {
        self.varCount++;
        console.log(self.varCount);

        if (self.varCount >= 100) {
          clearInterval(this.startInterval);
        }
      };
      this.startInterval = setInterval(start, 0);
    };

    draw();
  }
→ Ссылка