View not updated after value changed, frozen range

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.