我在离子中有以下切换:

<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。 当变量被设置时,由于ionChange函数, ionChange changeConfirmation()函数也会被调用。 如果用户手动切换开关,我怎么能只调用这个函数?

#1楼 票数:0

我建议去反应。 它具有很酷的功能,包括您现在正在寻找的功能...即以编程方式设置值时,您可以定义它不触发事件,在这种情况下,表单控件的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 样本

  ask by ninesalt translate from so

未解决问题?本站智能推荐:

1回复

如何在 Ionic 的 variables.scss 中以编程方式设置变量?

Ionic 带有一个 variables.scss 文件,您可以在其中设置不同的样式变量,例如原色等。 有没有办法以编程方式更改此处的变量? 例如:将原色更改为颜色选择器的结果
1回复

在以编程方式设置之前,BehaviorSubject始终默认为false

我在我的应用程序中使用BehaviorSubject进行身份验证,如果将其设置为true,则意味着用户已使用令牌和有效到期时间登录,并且该应用程序应将其重定向到主仪表板页面。 如果为假,则应提示他们登录。 除非应用程序恢复运行并且用户已登录,否则一切都按预期工作。即使用户已登录且Beha
1回复

以 angular 编程方式获取和设置子组件的值

我正在创建一个基于 ionic、angular 和 html5 的棋盘游戏。 我创建了两个组件 app-board 和 app-square。 app-square 是 app-board 组件的子组件。 app-square 组件作为以下属性 board.component.html 作
1回复

以编程方式设置表单的字段使表单无效

在Ionic 3 / Angular 5应用中,我有一个由3个字段组成的表单: 名字(输入文字) 生日(日期选择器) 头像(单选按钮) 如果表单无效,则禁用提交按钮: [disabled]="!addChildForm.valid" 在初始化时,我检查用户
1回复

在带有 Angular 9 的 Ionic 5 中以编程方式在单选组中设置选中的单选按钮

我正在 Ionic 5 和 Angular 9 中做一个应用程序。 我有一个带有选项的无线电组,我可以通过 HTTP 请求获取这些选项,并且我想以编程方式将其中一个设置为选定的选项。 成分: 模板: 当我获取数据时,我分配了我想要选择的对象,但是,它没有在 radio-group 中选择
1回复

* ionic框架*无法从由自定义Google Maps控件触发的onchange事件中调用公共方法

我是离子技术(以及一般而言的Web编程)的新手,正在尝试构建一个涉及Google Maps JS API的小型应用程序。 我已经成功创建,加载了地图并在其上创建了自定义控件(下拉选择菜单),但是无法通过onchange事件执行特定功能(“ openListCuaHangModal”为名称)。
1回复

如何在 SeatMap anychart 中以编程方式选择座位?

支持以下功能 在大型平面图中搜索特定座位 成套选择座位,就像在单击一个座位时选择相邻的座位一样 如何使用 SVG 以编程方式在 SeatMap 中选择座位?
1回复

Ionic2-以编程方式滚动离子滚动

我有一个页面,其中两个滚动视图彼此相邻: 我想以编程方式滚动第一个,但似乎scrollTo只是离子含量的一种方法(我当然不能滚动,我需要使第二个独立) 有什么办法解决这个问题? 更新:添加了plnkr以显示我需要什么