离子2范围滑块初始位置

Question

我试图很长一段时间以解决此问题，以解决此问题，基本上我有一个范围滑块，我正在尝试设置其默认的启动值，但是使用没有成功，在官方文档中也不是在网络上，我能够找到任何东西，什么是正确的方法？我能够以这种方式获取并显示该范围的实际值：

home.html

  <ion-item>
    <ion-range [(ngModel)]="rangeSettings" (ionChange)="cValue($event, 'slider1')">
      <ion-icon range-left small name="water"></ion-icon>
      <ion-icon range-right name="water"></ion-icon>
    </ion-range>
  </ion-item>
  Flusso d'acqua
  <ion-badge color="secondary">{{slideValueBadge[slideValueBadge.length -1]}}</ion-badge>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as io from 'socket.io-client';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  socket:any
  chat_input:string;
  chats = [];
  prova = [];
  rangeSettings:any;
  slideValueBadge = [];

  constructor(public navCtrl: NavController) {
   var a;
   this.socket = io('http://localhost:3000');
   this.rangeSettings = {
       type: "double",
       min: 0,
       max: 1000,
       from: 200,
       to: 500
   };

   this.socket.on('message', (msg) => {
     console.log("message", msg);
     this.chats.push(msg);
   });
   this.socket.on('prova', (msgProva) => {
       console.log("msgProva", msgProva);
       this.prova.push(msgProva);
   });
   this.socket.on('sValue', (value) => {
       this.slideValueBadge.push(value);
       console.log("sliderValue:", value);
   });
  }
  send(msg) {
        if(msg != ''){
            this.socket.emit('message', msg);
        }
        this.chat_input = '';
  }
  cValue(event, nome) {
      console.log("SliderValue", event._valA);
      this.socket.emit('sValue', event._valA);
  }
}

那么，如何将滑块的默认启动位置设置为例如20？

Answer 1

您不能使类型对象的范围[(ngModel)]的值，只需将其更改为 rangeSettings: number = 20;

您可以直接从HTML

设置选项

<ion-range dualKnobs="true" min="0" max="1000" step="2" [(ngModel)]="rangeSettings">

Answer 2

我认为您正在尝试将属性放在[(ngModel)]中。[(ngModel)]将绑定(在[(ngModel)]中绑定在这种情况下(与UI的属性。我确定如果您正确使用它，可以设置默认值。

例如。这样：

在.html

中

<ion-range [(ngModel)]="myValue" (ionChange)="cValue($event, 'slider1')">

在.ts中：

myValue = 20;

如果要将rangeSettings中的属性设置为<ion-range>，则像这样单独应用：

<ion-range min="0" max="1000" [(ngModel)]="myValue" (ionChange)="cValue($event, 'slider1')"></ion-range>