Angular2 ng2-slider-component 与模型绑定答案

【问题标题】：Angular2 ng2-slider-component bind with modelAngular2 ng2-slider-component 与模型绑定
【发布时间】：2017-03-14 17:32:53
【问题描述】：

我在使用 angular2 (V2.1.1) 开发的应用程序中使用 ng2-slider 作为价格范围过滤器。它按预期显示滑块。我按照https://github.com/Bogdan1975/ng2-slider-component 的指示进行操作。问题是我找不到任何说这些是与此滑块绑定的变量的东西。所以我无法访问使用滑块更改的最小值和最大值。

【问题讨论】：

标签： angular slider

【解决方案1】：

min、max、value、startValue、endValue都是滑块组件的默认变量。您只需要定义相关变量并将它们分配给滑块组件的适当默认变量即可。

 <ng2-slider 
        min="myMinVal"
        max="myMaxValue"
        value="myCurrentvalue">

 </ng2-slider>

 export class App{
     myMinVal:number=0;
     myMaxValue:number=100;
     myCurrentValue:number:30;
 }

如果 number 数据类型不起作用，请使用 string 类型，因为我不知道哪种数据类型会起作用。

【讨论】：

感谢@micronyks 的回答。我在上面尝试了你的建议。但是没有人工作 .myMinVal ,myMaxValue 和 myCurrentvalue 一旦定义就永远不会改变。

【解决方案2】：

我只是查看了源代码：

您可以使用 onRangeChange 事件访问滑块更改的所有值

<ng2-slider min="3"
    max="33"
    value="7"
    stepValue="1"
    (onRangeChanged)="onRangeChange">
</ng2-slider>


export class MyComponent{

   onRangeChange(data){
      //data.max
      //data.min
      //data.startValue
      //data.endValue
   }
}

【讨论】：

感谢@Bougarfaoui 的回答。我读过 onRangeChange 但这个函数从来没有在滑动时调用过。
哎呀，问题出在模块本身

【解决方案3】：

我找到了答案，你可以通过http://bogdan1975.github.io/slider/ 找到它。

HTML：

<ng2-slider
        #range
        min="6"
        max="23"
        startValue="9"
        endValue="21"
        (onRangeChanged)="rangeValueChanged($event, 'range-1-start', 'range_1_end')">
</ng2-slider>
<p class="value-box">
    Values: <span class="value-span" id="range-1-start">9</span> - <span class="value-span" id="range-1-end">21</span>
</p>

打字稿：

rangeValueChanged(event, start:any, end:any) {
    var start_el = this.getElement(start);
    var end_el = this.getElement(end);
    start_el.innerText = event.startValue;
    end_el.innerText = event.endValue;
}

getElement(data){
    if (typeof(data)=='string') {
        return document.getElementById(data);
    }
    if (typeof(data)=='object' && data instanceof Element) {
        return data;
    }
    return null;
}

【讨论】：