Angular 如何获取角材质滑块的当前值？

我的问题与你的不同 在这种情况下，我需要将滑块的值传递给组件，而不是 只需使用局部变量；但在角材料方面也是如此 已更改，因此滑块现在需要添加$event对象 传递给组件函数

我在Angular 4中有一个Angular材质滑块组件：

HTML

---

我对Angular很陌生，我很难获得滑块的当前值。它似乎不适用于$event对象？

我对$event对象感到困惑-我需要在组件中仅使用event来引用它。ts:

HTML

<h2>freq.</h2>
  <button class="btn btn-primary" (click)="play()">Play</button>
  <mat-slider min="430" max="500" step="10" #matslider (input)="pitch($event)"></mat-slider>

      <div>
        {{ matslider.value }}
      </div>

使用（输入）事件时，当您单击mat滑块外部时，它仍会触发此事件

我把它改成了（改变）事件

这是我显示垫子滑块值的方式，我和大家一样关心

TS文件

export class SliderOverviewExample {
  gridsize: number = 30;
  updateSetting(event) {
    this.gridsize = event.value;
  }
}

HTML文件

<div>
    <span>Grid Size (px): </span><b class="gridSizeValue">{{gridsize.value}}</b>
</div>
<mat-slider #gridsize (change)="updateSetting($event)" 
      step="5" min="10" max="100" [value]="gridsize"></mat-slider>

网格大小（px）：{{gridsize.value}

---

演示

你的

pitch（）

方法在哪里？pitch（$event）{console.log（$event.target.value）；}我尝试了这个方法，也尝试了一个使用ngModel的版本，但都无法工作。请发布关于这个问题的更新代码。而且，

mat slider

给出了类型为

MatSliderChange

的输出，我想你不明白我的意思可能是重复的谢谢你的回答-这对我很有用。您知道如何设置滑块的起始/默认值吗？gridsize:number=30没有像我预期的那样设置30的起始默认值

import { Component, OnInit } from '@angular/core';
import { Inject, Injectable } from '@angular/core';
import { MatSlider } from '@angular/material';
import { AudioContext } from 'angular-audio-context';


@Component({
  selector: 'pitch-slider',
  templateUrl: './pitch-slider.component.html',
  styleUrls: ['./pitch-slider.component.css']
})


export class PitchSliderComponent implements OnInit {
  value: 450;

  constructor(private _audioContext: AudioContext) { }

  ngOnInit() {
  }

  pitch(event: any) {
  console.log(event.value);
}

  play() {
    console.log("play clicked!");
    var frequency = this.value;
    var volume = 0.2;
    var oscillator = this._audioContext.createOscillator();
    var gainNode = this._audioContext.createGain();

    oscillator.connect(gainNode);
    gainNode.connect(this._audioContext.destination);

    gainNode.gain.value = volume;
    oscillator.frequency.value = frequency;

    oscillator.start();

    setTimeout(
      function(){
        oscillator.stop();
      }, 500
    );
  }

}

export class SliderOverviewExample {
  gridsize: number = 30;
  updateSetting(event) {
    this.gridsize = event.value;
  }
}

<div>
    <span>Grid Size (px): </span><b class="gridSizeValue">{{gridsize.value}}</b>
</div>
<mat-slider #gridsize (change)="updateSetting($event)" 
      step="5" min="10" max="100" [value]="gridsize"></mat-slider>