Hello,
I have a question. I made an app, with a lot of ranges. The HTML code of this range is this:
<ion-card *ngFor="let setting of generalSettings">
<ion-item>
<ion-label>{{setting.title}}</ion-label>
<ion-badge item-right>{{setting}}</ion-badge>
<ion-toggle disabled="true" checked="true"></ion-toggle>
</ion-item>
<ion-item>
<ion-range min={{setting.min}} max={{setting.max}} step={{setting.step}} pin="true" snaps="true" [(ngModel)]="setting.value" debounce="200" (ionChange)="setting.changeRange()">
<ion-label range-left>{{setting.min}}</ion-label>
<ion-label range-right>{{setting.max}}</ion-label>
</ion-range>
</ion-item>
</ion-card>
I got the data over an websocket. When I got a message, I put it into the right setting. The model gots updated, but the view not.
However, when I show a loading message, the view will updated. And when I show the loading message twice, the range can be updated (on the first launch it looks like frozen, I cannot slide the range, but the value will be updated.
I defined a custom class for the range, called FormRange. This is the code:
export class FormRange {
private _value: number;
private _default: number;
private _min: number;
private _max: number;
private _affix: string;
private _name: string;
private _title: string;
private _step: number;
private _code: string;
private _toggleDisabled: boolean;
private _enabled: boolean;
private onChange: any;
constructor(data: FormRangeFormat) {
this.name = data.name;
this.default = data.value;
this.value = data.value;
this.min = data.min;
this.max = data.max;
this.affix = data.affix;
this.title = data.title;
this.step = data.step;
this.code = data.code;
this.toggleDisabled = data.toggleDisabled;
this.enabled = data.enabled;
this.onChange = data.onChange;
}
public set value(value: number) {
if (value == 0) {
this.enabled = false;
value = this.default;
} else {
this.enabled = true;
if (this.min >= value) {
value = this.min; //Value is lower than min
} else if (this.max <= value) {
value = this.max; //Value is higher than max
}
}
this._value = value;
}
public get value() {
return this._value;
}
public set default(value: number) { this._default = value; }
public get default() { return this._default; }
public set min(min: number) { this._min = min; }
public get min() { return this._min; }
public set max(max: number) { this._max = max; }
public get max() { return this._max; }
public set affix(affix: string) { this._affix = affix; }
public get affix() { return this._affix; }
public set name(name: string) { this._name = name; }
public get name() { return this._name; }
public set title(title: string) { this._title = title; }
public get title() { return this._title; }
public set step(step: number) { this._step = step; }
public get step() { return this._step; }
public set code(code: string) { this._code = code; }
public get code() { return this._code; }
public set toggleDisabled(toggle: boolean) { this._toggleDisabled = toggle; }
public get toggleDisabled() { return this._toggleDisabled; }
public set enabled(enabled: boolean) { this._enabled = enabled; }
public get enabled(): boolean { return this._enabled }
toString() {
try {
let value: string;
if (this.enabled || this.enabled == null) {
value = this.value.toString();
} else {
value = "0";
}
return value + this.affix;
} catch (e) {
console.error(e);
return "-";
}
}
changeRange() {
this.onChange(this.code, this.value);
}
changeToggle() {
if (this.enabled) {
this.changeRange();
} else {
this.onChange(this.code, 0);
}
return true;
}
}
export interface FormRangeFormat {
title?: string;
name?: string;
value?: number;
min?: number;
max?: number;
conditionalMax?: FormRange;
step?: number;
affix?: string;
code?: string;
toggleDisabled?: boolean;
enabled?: boolean;
onChange?: any;
}
I created the entity with this code:
this.generalSettings.push(new FormRange(<FormRangeFormat>{
title: "Range 1", name: "range1", value: 3, min: 0, max: 20, step: 1, affix: " qt", onChange: this.websocketDataAdd, code: "r1"
}));
The function websocketDataAdd is a parameter, and is nothing special.
Cordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4
Xcode version: Not installed
How can I fix this? If you have any question, feel free to ask.