не удалось получить переменные компонента в функции setTimeout

1

Я новичок в Angular (6), и я получаю эту проблему: я не могу получить переменные компонента в функции setTimeout. Взгляните на код, объяснив мою проблему.

    export class ConSellerDraftsolSecOneComponent implements OnInit {
      draftSolutionForm: FormGroup;

    //Other code

    //ngOnIt
     ngOnInit() {
        this.draftSolutionForm = this.formBuilder.group({
          title: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
          product: [''],
        })
    }

    //function
     autosavedraftsolution() {
    //here, it is working
     console.log(this.draftSolutionForm);
     setTimeout(function () {
     //here, it is not working, showing "undefined" and even intellisense is not supporting me here to do this
     console.log(this.draftSolutionForm);
        }, 3000);
      }
   }

Помогите мне определить причину. Спасибо.

  • 0
    попробуйте с лямбда и setInterval (() => {console.log (this.draftSolutionForm}, 3000);
  • 0
    Может быть из-за функции стрелки -> var ref= this; и ref.draftSolutionForm решит вашу проблему
Показать ещё 4 комментария
Теги:
angular
angular6

5 ответов

1
Лучший ответ

Вам нужно использовать выражение лямбда:

setTimeout(() => {
 console.log(this.draftSolutionForm);
    }, 3000);
Поделиться
  • 1
    () => эта вызываемая функция стрелки может сбить людей с толку, вы сказали лямбда, вы просто напомните мне о днях c #, для лямбда-выражения
1

Попробуйте

.bind (это)

setTimeout(function () {
  console.log(this.draftSolutionForm);
}.bind(this), 3000);
Поделиться
  • 0
    Спасибо за ваш вклад. Я очень ценю это.
  • 0
    bind - это функциональный трюк, для bind :)
1

Это связано с тем, что внутри функции() это указывает на контекст функции.

autosavedraftsolution() {
  setTimeout(() => {
    //here, it is not working and even intellisense is not supporting me here
    console.log(this.draftSolutionForm);
  }, 3000);
}
Поделиться
  • 0
    Спасибо за ваш вклад. Я очень ценю это.
  • 0
    в короткой стрелке функция привязки к текущему this, и это обычно используется в теле класса, как это
1 
 export class ConSellerDraftsolSecOneComponent implements OnInit {
      draftSolutionForm: FormGroup;

    //Other code

    //ngOnIt
     ngOnInit() {
        this.draftSolutionForm = this.formBuilder.group({
          title: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
          product: [''],
        })
    }

    //function
     autosavedraftsolution() {
    //here, it is working
     console.log(this.draftSolutionForm);
     setTimeout(() => {console.log(this.draftSolutionForm);}, 3000);


      }
   }
Поделиться
  • 0
    Спасибо за ваш вклад. Я очень ценю это.
0

ES6/2015 Выражение функции стрелки имеет более короткий синтаксис, чем выражение функции и не имеет свой собственный this

setTimeout(() => {
 // this => ConSellerDraftsolSecOneComponent 
 console.log(this.draftSolutionForm);
 }, 3000);

Или вы можете определить переменную для доступа к this (лексическая область)

let _this = this;
setTimeout(function () {
  console.log(_this.draftSolutionForm);
}, 3000);

Метод finaly bind создает новую функцию, которая при вызове имеет это ключевое слово, заданное для предоставленного значения, с заданной последовательностью аргументов, предшествующей любому, когда она вызывается при вызове новой функции

setTimeout(function () {
  console.log(this.draftSolutionForm);
}.bind(this), 3000);
Поделиться
  • 0
    Спасибо за ваш вклад. Я очень ценю это.
  • 0
    Спасибо хорошего дня

Ещё вопросы

Сообщество Overcoder
Наверх
Меню