获取角度2中的mdslider值? [英] Get mdslider value in angular 2?
本文介绍了获取角度2中的mdslider值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个输入字段,我想在其中显示matSlider的值
I have a input field in which i want to show the value of the matSlider
<div class="col-lg-4 col-md-4 col-sm-12">
<mat-slider class="example-full-width"
[max]=""
[min]="min"
[step]="step"
[thumb-label]="thumbLabel"
(input)="onInputChange($event)"></mat-slider>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<mat-form-field class="example-full-width">
<input type="number" matInput formControlName="txtMinPriceRange" placeholder="Minimum" [value]="minValue">
</mat-form-field>
</div>
现在我正在使用(input)="onInputChange($ event)",还有其他方法可以做到吗
right now I am using (input)="onInputChange($event)" is there any other way to do this
推荐答案
是的,您可以通过以下两种方法来做到这一点:
Yes you can do it by 2 ways:
1)无需使用localVariable
在组件端进行调用:
1) There is no need to call on component side, by using localVariable
:
<div class="col-lg-4 col-md-4 col-sm-12">
<mat-slider class="example-full-width"
[max]=""
[min]="min"
[step]="step"
[thumb-label]="thumbLabel"
#matslider></mat-slider>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<input type="number" placeholder="Minimum" [value]="matslider?.value">
</div>
2),侧面为Component
:
// component
export class SliderOverviewExample {
matslider2 = 0;
changeMatslider2(slider) {
this.matslider2 = slider.value ;
}
}
// template side
<div class="col-lg-4 col-md-4 col-sm-12">
<mat-slider class="example-full-width"
[max]=""
[min]="min"
[step]="step"
[thumb-label]="thumbLabel"
(input)='changeMatslider2($event)'></mat-slider>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<input type="number" placeholder="Minimum" [value]="matslider2">
</div>
这是两个实现都可以正常工作的演示的链接:
Here is the link to working demo with both implementation :
https://plnkr.co/edit/JlTyXM?p=preview
这篇关于获取角度2中的mdslider值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文