在不触发绑定到 ionChange 的函数的情况下更改绑定到数据的 ngModel - Ionic 3答案

【问题标题】：change ngModel bound to data without triggering a function bound to ionChange - Ionic 3在不触发绑定到 ionChange 的函数的情况下更改绑定到数据的 ngModel - Ionic 3
【发布时间】：2018-07-24 09:09:09
【问题描述】：

我有一个带有 ion-range UI 元素的应用程序，它使用 [(ngModel)] (2way) 绑定到 var，然后我有 (ionChange) 事件触发使用 ion-range 值的函数。

有时我需要通过直接更改绑定到ngModel的var来将范围“设置”到特定位置，但我需要避免在此操作过程中触发ionChange。

如果我这样做很简单（请参阅 changeValue 方法） - ionChange 事件将在数据更改时触发，我需要避免这种情况（我需要将旋钮放置到新位置而不触发事件）

我使用了一个带有标志的技巧（参见 changeValueViaFlag 方法） - 现在它按预期工作，注意我还必须使用超时，因为如果我不延迟将标志设置回其“正常”状态 - 角度的变化检测不会接听;(

更新：

我尝试了使用 ngModelChange 的技巧，该技巧可以在 SO 中找到：ionChange - detect changes only from view to model in Ionic 2 - 问题在于 ngModelChange - 我没有得到与使用 ionChange 相同的“更改检测”...

所以在我的应用程序中，范围用于选择颜色强度。如果我切换到 ngModelChange - 形状颜色强度不会发生......;/

问题：有没有更好的方法来实现我想要的？

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private testRange: number = 20;

  private flag: boolean = true;

  constructor(
    public navCtrl: NavController,
  ) {
  }

  logRange($event) {
      if (this.flag) {
        console.log("ionChange emitted: ",$event.value, this.testRange)
      }
  }
  
  changeValue() {
      this.testRange = 10;
  }

  changeValueViaFlag() {
      this.flag = false;
      this.testRange = 10;
      setTimeout(()=>{
        this.flag = true;
      }, 500)
  }
 
}

<ion-header>
  <ion-navbar>
    <ion-title>
      Ion range test case
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-range [(ngModel)]="testRange" (ionChange)="logRange($event)">
    </ion-range>
    <button ion-button (click)="changeValue()">Change range value to 10</button>
</ion-content>

【问题讨论】：

ionChange - detect changes only from view to model in Ionic 2的可能重复
发现了类似的问题并验证了正确的答案：stackoverflow.com/questions/42956651/…
不幸的是，该解决方案不适用于这种情况，因为此离子范围必须进行与 ionChange 相同的变化检测...
还尝试在角度区域之外运行 changeValue 方法。没有帮助；/

标签： ionic-framework ionic3

【解决方案1】：

click 是一个 DOM 事件，与更高级别的 ngModel 无关。正确的事件是 ngModelChange。如果你想使用 DOM 事件，那么忘记 ngModel 并在处理程序中使用 $event 或 #ref。

所以，而不是

<input [(ngModel)]="item.completed" (click)="completed(i)" type="checkbox">

应该是

<input [(ngModel)]="item.completed" (ngModelChange)="completed(i)" type="checkbox">

【讨论】：