Question

我有一个输入字段，我想在其中显示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>

现在我正在使用（输入）=“onInputChange（$ event）”有没有其他方法可以做到这一点

Answer 1

是的，您可以通过两种方式实现：

1）使用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>

这是实施工作演示的链接：

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

以角度2获取mdslider值？

1 个答案: