0

Не могу разобраться, если вызывать 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();
  }
}

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

6
  • а чем тебя не устраивает второй вариант? =) он же рабочий и правильный) 12 июн 2020 в 11:18
  • @overthesanity, там просто много чего ещё надо в функцию передавать и вызывать с разными аргументами. Я просто очень сильно сократил код и выделил суть проблемы 14 июн 2020 в 14:43
  • почитай комментарий @yugofx под ответом, он там все изложил в чем основная суть и почему твой код не работает первый 14 июн 2020 в 15:45
  • @overthesanity, прочитал, но не понял как это пофиксить, чтобы туда передавалось значение, а не ссылка. И не понял почему у меня varCount перестал быть значением, а стал ссылочным типом 15 июн 2020 в 19:29
  • мне кажется, или тебе стоит ознакомиться с основами JSа прежде чем учить фреймворки? =) просто это досконально изложено на learn javascript в курсе работы с функциями 15 июн 2020 в 19:42

1 ответ 1

-1

У вас 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();
  }
3
  • так у него второй вариант работает и без копирования ссылки this в self :) 12 июн 2020 в 11:13
  • да? Я не проверял просто))
    – RavenTheX
    12 июн 2020 в 11:14
  • @RavenTheX нигде this не теряется. просто надо различать передачу аргументов в функцию по значению и по ссылке. В первом варианте передается значение, а во втором просто сразу изменяется поле класса. Плюс, создание стрелочных функций происходит сразу с "прибитым" контекстом. Поэтому и первый вариант бы работал, если бы не абсолютно ненужная передача параметра
    – Yugofx
    12 июн 2020 в 13:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.