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。我相信如果你正确使用它，你可以设置默认值。

E.g。像这样：

在.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>

IONIC 2 Range滑块初始位置

2 个答案: