Question

我有一个带有离子范围UI元素的应用程序，它使用[（ngModel）]（2way）绑定到var，然后我有（ionChange）事件触发一个使用离子范围值的函数。 / p>

有时我需要通过直接更改绑定到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>

Answer 1

click是一个DOM事件，与更高级别的ngModel不相关。正确的事件是ngModelChange。如果要使用DOM事件，请不要使用ngModel并在处理程序或#ref中使用$ event。

所以，而不是

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

应该是

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

更改绑定到数据的ngModel而不触发绑定到ionChange的函数 - Ionic 3

1 个答案: