Angular Ionic2离子范围未使用ngModel更新

我的爱奥尼亚信息：

Cordova CLI:6.3.1

离子框架版本：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>

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

我做错什么了吗？

试试看

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

实际上，不清楚为什么有两个变量myRange和myValue，它们之间有什么关系。但无论如何，请将myValue传递到ngModel中

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

---

实际上，不清楚为什么有两个变量myRange和myValue，它们之间有什么关系。但在任何情况下，将myValue传递到ngModel中，正如Yurzui所说的，如果我这样做，它会工作得很好

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

我把它放在这里是为了让它更清晰

这是他的两个plnkr链接

使用表格：

无格式：

---

谢谢你的帮助。

正如尤尔祖所说，如果我这样做，它会工作得很好

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

我把它放在这里是为了让它更清晰

这是他的两个plnkr链接

使用表格：

无格式：

---

感谢您的帮助。

我通过在ionChange回调中调用this.zone.run解决了这个问题，这将强制用户界面刷新

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

}

---

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

}

---

你说得对，这两个变量没有用。但现在我纠正了它，当我将myValue设置为其他值时，它仍然没有更新我的离子范围。我已经用console.log对它进行了测试，它正确地更新了myValue的值Ionic2的版本是什么？betasIonic Framework版本：2.0.0-beta.11-ION Cli版本：2.0.0中存在一些问题我已经一个月没有更新它了。我会试试的。所以我更新了爱奥尼亚，但我仍然有同样的问题。我还更新了我的问题，以澄清你是对的，这两个变量没有用。但现在我纠正了它，当我将myValue设置为其他值时，它仍然没有更新我的离子范围。我已经用console.log对它进行了测试，它正确地更新了myValue的值Ionic2的版本是什么？betasIonic Framework版本：2.0.0-beta.11-ION Cli版本：2.0.0中存在一些问题我已经一个月没有更新它了。我会试试的。所以我更新了爱奥尼亚，但我仍然有同样的问题。我还更新了我的问题，使之更清晰。没有表格，它应该与表格一起工作。你可以更新表格值，而没有表格。它应该与表格一起工作。你可以更新表格值。这对我来说也很有效，但我希望有一种方法可以做到，没有这个…这对我来说也很有效，但我希望有一种方法可以做到没有这个。。。