Установить переменную программно, не вызывая onChange

Question

У меня есть следующий переключатель в ионном:

<ion-toggle (ionChange)="changeConfirmation($event)" [(ngModel)]="check" color="tertiary">

И это функция changeConfirmation().

  changeConfirmation(event) {  // should only happen when manually toggled
    this.user.changeConfirmation(this.date, this.check, this.userData)
    this.toast.showToast(`Your name has been ${this.check ? 'added to' : 'removed from'} the list`, 'top')
  }

Значение переключателя установлено в true / false в моем коде, когда компонент отображается в зависимости от данных, которые я получаю из базы данных.Когда переменная установлена, функция changeConfirmation() также вызывается из-за функции ionChange.Как я могу вызвать эту функцию, только если пользователь вручную переключил переключатель?

Answer 1

Я бы предложил пойти реактивно.Он имеет интересные функции, в том числе то, что вы сейчас ищете ... т.е. при программной установке значения вы можете определить, что оно не вызывает событие, в данном случае valueChanges элемента управления формы.Кстати, если это форма, я бы посоветовал вам перейти к реактивной форме!Но давайте просто воспользуемся «простым» управлением формой здесь:

import { FormControl } from '@angular/forms';

// ...

myToggle = new FormControl();
formCtrlSub = new Subscription();

constructor() {
  // is fired when value changes
  this.formCtrlSub = this.myToggle.valueChanges.subscribe((value: boolean) => {
    console.log('user changed value!')
  })
}

// for testing setting value in Onit
// set the boolean value using setValue()
// adding emitEvent:false will not trigger valueChanges
ngOnInit() {
  this.myToggle.setValue(true, { emitEvent: false})
}

ngOnDestroy() {
  // remember to unsubscribe!!
  this.formCtrlSub.unsubscribe();
}

Затем в шаблоне присоедините форму управления, и вы можете удалить ionChange, так как мы слушаем valueChanges:

<ion-toggle [formControl]="myToggle"></ion-toggle>

ОБРАЗЕЦ STACKBLITZ