Angular2 ng2-slider-component与模型绑定

时间:2017-03-13 09:10:42

标签: angular slider

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

3 个答案:

答案 0 :(得分:0)

min,max,value,startValue,endValue all都是滑块组件的默认变量。您只需定义相关变量并将它们分配给滑块组件的相应默认变量。

yx = 2*np.pi*np.einsum("i,j->ij", y, x)
I_avg = np.sin(yx) @ signal    
Q_avg = np.cos(yx) @ signal 

如果数字数据类型不起作用,请使用字符串类型,因为我不知道哪种数据类型会起作用。

答案 1 :(得分:0)

我刚看了一下源代码:

您可以使用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
   }
}

答案 2 :(得分:0)

我找到了答案,你可以通过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;
}