如何在离子范围内保持步进浮点数

Question

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);
    }
  }
}

在浮动范围组件上使用ngModel时出现运行时错误。：未指定名称属性的窗体控件没有值访问器

有什么解决方案可以在这两个组件之间绑定ngModel数据吗？

Answer 1

嘿伙计们，

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

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

在float-range组件中，将输入绑定到离子范围的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;