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。顺便说一句，如果这是一种形式，我将进一步建议您继续使用被动形式！但是，我们只在这里使用一个“简单的” formcontrol：

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 SAMPLE

以编程方式设置变量而无需触发onChange

1 个答案: