如何在离子范围内保留浮点数

Question

我使用离子3并将离子范围输入分量增加0.25这是组件文档

使用step =“0.5”如上所述不起作用

<ion-range class="note-range" min="0" max="20" step="0.5" [(ngModel)]="item.note" color="secondary" (ionChange)="noteChanged($event)"> <ion-label range-left>0</ion-label> <ion-label range-right>20</ion-label> </ion-range>

所以我按照上面“Jahdere”给出的解决方案

import { Component, ViewChild, Input } from '@angular/core';

import { Range } from 'ionic-angular';


@Component({
  selector: 'float-range',
  template: '<ion-range #range [min]="min" [max]="max" [pin]="pin" [step]="step" [snaps]="snaps"></ion-range>'

})
export class FloatRangeComponent {

  @Input() max: number;
  @Input() min: number;
  @Input() pin: boolean;
  @Input() step: number;
  @Input() snaps: boolean;

  @ViewChild('range')
  set range(range: Range) {
    let floatRange: FloatRangeComponent = this;
    range._ratioToValue = function(ratio: number) {
      this._step = Math.round(floatRange.step * 100) / 100;
      ratio = (this._max - this._min) * ratio;
      ratio = (ratio / this._step) * this._step + this._min;
      return Math.round(ratio * ( 1 / this._step)) / ( 1 / this._step);
    }
  }
}

这个解决方案的问题是当我在float-range组件上使用ngModel时我得到了这个错误：

在float-range组件上使用ngModel时出现运行时错误。 ：没有带有未指定名称属性的表单控件的值访问器

是否有任何解决方案来绑定这两个组件之间的ngModel数据？

Answer 1

Hej Guys，

只需通过从浮动范围到离子范围组件的输入来管理ngModel的值！

<float-range [_ngModel]="item.value"></float-range>

在您的float范围组件中，将输入绑定到离子范围的ngModel：

@Component({
  selector: 'float-range',
  template: `<ion-range #range [min]="min" [max]="max" [pin]="pin" [step]="step" [snaps]="snaps" [(ngModel)]="_ngModel" (ionBlur)="onValueChange($event);" ngDefaultControl></ion-range>`
})
export class FloatRangeComponent {

  @Input() max: number;
  @Input() min: number;
  @Input() pin: boolean;
  @Input() step: number;
  @Input() snaps: boolean;
  @Input() _ngModel: any;