离子范围组件在更改时未显示值

Question

我正在尝试向控制台打印范围位置的值，因为我使用“ionChange”事件移动滑块，但发生了两件事：

1-我在控制台中看到很多这样的警告：

vendor.js:66869 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

2-该方法仅在我停止移动滑块时打印，我无法在控制台上打印范围经过的所有值，甚至不是“步骤”值

这就是我在'content'标签中的内容：

<ion-range min="1" max="180" [(ngModel)]="position" color="secondary" (ionChange)="rangeChanged($event)" step="10" debounce="500">
  <ion-label range-left>1</ion-label>
  <ion-label range-right>180</ion-label>
</ion-range>
<ion-item>
  Value = {{position}}
</ion-item>

这是我的“rangeChanged”函数中的代码：

  rangeChanged($event){
    console.log("Position1: ", $event);
    console.log("Position2: ", this.position);

  }

我正在使用这些版本：

C:\Users\user\rangeExample>ionic -v
3.19.0

C:\Users\user\rangeExample>cordova -v
8.0.0

我用谷歌搜索它，只看到旧帖子但没有解决我的问题，请告知

Answer 1

使用ngModelChange代替ionChange。

<ion-range min="1" max="180" [(ngModel)]="position" color="secondary" (ngModelChange)="rangeChanged($event)" step="10" debounce="500">
  <ion-label range-left>1</ion-label>
  <ion-label range-right>180</ion-label>
</ion-range>

这是working example ＆安培;这是我的输出