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'); 
     }); 
    } 

}