获取角度 2 中的 mdslider 值? [英] Get mdslider value in angular 2?

问题描述

我有一个输入字段，我想在其中显示 matSlider 的值

 
<mat-slider class="example-full-width"[最大]=""[分钟]="分钟"[步骤]="步骤"[拇指标签]="拇指标签"(input)="onInputChange($event)"></mat-slider>
<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>

现在我正在使用 (input)="onInputChange($event)" 有没有其他方法可以做到这一点

解决方案

是的，您可以通过两种方式做到:

1) 不需要在组件端调用，使用localVariable:

<mat-slider class="example-full-width"[最大]=""[分钟]="分钟"[步骤]="步骤"[拇指标签]="拇指标签"#matslider></mat-slider>
<div class="col-lg-2 col-md-2 col-sm-12"><input type="number" placeholder="Minimum" [value]="matslider?.value">

2) 带有 Component 端:

//组件导出类 SliderOverviewExample {matslider2 = 0;changeMatslider2(滑块){this.matslider2 = 滑块值；}}//模板端<div class="col-lg-4 col-md-4 col-sm-12"><mat-slider class="example-full-width"[最大]=""[分钟]="分钟"[步骤]="步骤"[拇指标签]="拇指标签"(input)='changeMatslider2($event)'></mat-slider>

<div class="col-lg-2 col-md-2 col-sm-12"><input type="number" placeholder="Minimum" [value]="matslider2">

这是两种实现的工作演示的链接:

https://plnkr.co/edit/JlTyXM?p=preview

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> 

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) 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) with Component side :

// 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屋！