Ionic2离子范围不ngModel

Question

我离子信息更新：

科尔多瓦CLI：6.3.1

离子Framework版本：2.0.0-beta.11

离子CLI版本：2.1。 0-beta.3

离子应用库版本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

正如Yurzui说，如果我做

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

它的工作好，我把它放在这里，所以它会更明显。

这里有他的两个plnkr链接

Withing形式： https://plnkr.co/edit/pTfsHxnYRfP6M71mQuBv?p=preview

没有形式：https://plnkr.co/edit/ex2IHfIVQShZktYh01iP?p=preview

感谢的对你有所帮助。

Answer 2

尝试

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

事实上，目前还不清楚为什么你有2个变量myRange和myValue和它们之间有什么关系。但在任何情况下，通过myValue到ngModel

Answer 3

我通过在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'); 
     }); 
    } 

}