Функция запуска при изменении поля

#javascript #angular #typescript

Вопрос:

Я хочу запустить функцию, если переменная флага изменена. Я читал о ngOnChanges том, что работает только с @Input переменными, в то время как у меня есть переменная.

 isFormCompleted: boolean = false;

ngOnInit() {
  this.checkComplete();
}

checkComplete() {
  /**
  * Checks if all conditions are valid and then turns the flag variable to true
  **/
  this.isFormCompleted = true;
}
 

Теперь я хочу запустить функцию, как только переменная флага будет изменена на true . Как мне этого добиться?

Ответ №1:

Для этого вы можете использовать rxjs, создав Subject поток, на который вы можете подписаться, когда он изменится. По умолчанию в Angular должны быть пакеты

 isFormCompleted$: Subject = new Subject<boolean>(false);

ngOnInit() {
  this.isFormCompleted$.subscribe({
    // Here you can add your callback and do with the changing value whatever you want
    next: (v) => console.log(`value: ${v}`)
  });
}

checkComplete() {
  this.isFormCompleted$.next(true);
}
 

Это всегда будет выполняться, когда объект изменяет свое значение.
Вы можете вызвать его, позвонив:

 this.isFormCompleted$.next(true);
 

Документация: https://rxjs.dev/guide/subject

Ответ №2:

Использование геттеров и сеттеров:

 private _isFormCompleted: boolean = false;

get isFormCompleted(): boolean {
  return this._isFormCompleted;
}

set isFormCompleted(value: boolean) {
  this._isFormCompleted = value;
  if (this._isFormCompleted) {
    this.functionCall();
  }
}
 

Комментарии:

1. Небольшое изменение: Добавьте проверку, так как она должна вызываться только при значении true.

Ответ №3:

Вы также можете попробовать этот способ.

 isFormCompleted: boolean = false;

ngOnInit() {
  this.checkComplete();
}

checkComplete() {

  if (this.isFormCompleted) {
      this.isFormCompleted = !this.isFormCompleted
   }
     
}