Question

我的离子信息：

Cordova CLI：6.3.1

Ionic Framework版本：2.0.0-beta.11

Ionic CLI版本：2.1.0-beta.3

Ionic App Lib版本2.0.0-beta.20

Html：

<ion-content padding>
    <form [formGroup]="myForm" (ngSubmit)="submitFunction()">   
        <ion-item>
            <ion-range [(ngModel)]="myRange" name="formRange" formControlname="formRange"></ion-range>
        </ion-item>
    </form>
    <button (click)="myFunction()"> function </button>
    {{myRange}}
</ion-content>

一开始，我的离子范围输入将显示2，{{myRange}}也显示

当我尝试直接使用范围更新它时，没关系。 {{myRange}}显示正确的值。但如果我用一个函数更新它，它就无法正常工作。

constructor(private builder: FormBuilder) {
    this.myRange = 2;
    this.myForm = builder.group({
        'formRange':this.myRange,
    });  
}
public myFunction()
{
    this.myRange = 9;
}

{{myRange}}的显示将显示9，但离子范围输入仍会显示2.

我做错了吗？

Answer 1

我通过在ionChange回调中调用this.zone.run（）来解决问题，这会强制UI刷新。

import { Component, NgModule, ViewChild, ElementRef, NgZone } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';

@Component({
  selector: 'page-myLevel',
  template: `
    <ion-list>
        <ion-list-header>Level {{myRange}}</ion-list-header>
        <ion-item>
            <ion-range min="1" max="10" debounce="5" pin="true" step="1" snaps="true" color="secondary" [(ngModel)]="myRange" (ionChange)="updatePro($event)">
            </ion-range>
        </ion-item>
    </ion-list>
  `
})
export class myLevel {
  myRange: Number;

  constructor(public viewCtrl: ViewController, private builder: FormBuilder, private zone: NgZone) { 
  }

  updatePro(e){
    /// Refresh the UI
     this.zone.run(() => {
            console.log('UI has refreshed');
        });
  }

}

Answer 2

正如Yurzui所说，如果我做的话，它的效果很好

public myFunction()
{
  this.val = 9;
  this.myForm.controls['formRange'].updateValue(this.val);
}

我把它放在这里，以便更加明显。

这是他的两个plnkr链接

使用表格： https://plnkr.co/edit/pTfsHxnYRfP6M71mQuBv?p=preview

没有表格：https://plnkr.co/edit/ex2IHfIVQShZktYh01iP?p=preview

感谢您的帮助。

Answer 3

尝试

<ion-range [(ngModel)]="myValue" name="formRange" formControlname="formRange"></ion-range>

实际上，不清楚为什么你有2个变量myRange和myValue以及它们之间的关系是什么。但无论如何，请将myValue传递给ngModel

Ionic2离子范围未使用ngModel进行更新

3 个答案: