如何获取 Angular Material 滑块的当前值?

2024-01-15

我的问题与获取角度 2 中的 mdslider 值? https://stackoverflow.com/questions/46906219/get-mdslider-value-in-angular-2因为我需要将滑块的值传递给组件,而不是 只需使用局部变量;而且还涉及角度材料 已更改,因此滑块现在需要 $event 对象 传递给组件函数。

我在 Angular 4 中有一个 Angular Material 滑块组件:

HTML

<mat-slider min="430" max="500" step="10" value="450" (input)="pitch($event)"></mat-slider>

TS

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 {



  constructor(private _audioContext: AudioContext) { }

  ngOnInit() {
  }

}

我对 Angular 很陌生,无法获取滑块的当前值。它似乎不适用于 $event 对象?


我对 $event 对象感到困惑 - 我需要仅使用 component.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>

TS

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
    );
  }

}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取 Angular Material 滑块的当前值? 的相关文章

随机推荐

  • 使用 @babel/preset-typescript 从环境 TypeScript 模块中使用枚举?

    是否可以食用enum来自正在编译的文件babel using babel preset typescript mymodule d ts declare module mymodule export enum Fruit apple App
  • 表达式中括号组的 ISO C 等效项

    如何以符合 ISO C99 的方式执行以下操作 define MALLOC type length message type a LINE type malloc length sizeof type assert message a LI
  • C#7 值元组/解构不对称

    在这里摆弄 https dotnetfiddle net 9Ex5Jp 给定一个函数 string a string b F 您可以解构它返回的元组 var a b F string c string d F 或者你可以直接分配它 var
  • Python GIL 真的是针对每个解释器的吗?

    我经常看到人们谈论 GIL 是每个 Python 解释器的 甚至在 stackoverflow 上也是如此 但我在源代码中看到 GIL 似乎是一个全局变量 因此每个 python 进程中的所有解释器都有一个 GIL 我知道他们这样做是因为没
  • 通过 bonjour 在两个 iOS 设备之间流式传输图像

    我的目标是通过 bonjour 将 AVCaptureOutput 捕获的图像从一台 iOS 设备流式传输到另一台设备 这是我当前的方法 1 从视频输入中捕获帧 void captureOutput AVCaptureOutput capt
  • 如何解决React Native应用程序中的TapJacking漏洞

    我知道我可以在我的视图中应用这些属性 filterTouchesWhenObscured 方法 onFilterTouchEventForSecurity 但我想应用于我的每个可点击视图 那么我该如何应用它 我今天需要修复窃听场景 对我的应
  • 从 VPC 内部访问 VPC 外部的 AWS 资源 - 无服务器框架

    我正在尝试从 VPC 内部的 lambda 函数访问 VPC 外部的运动流 目前 当执行写入 kinesis 流的代码时 它将挂起 然后超时 当我将 lambda 从 VPC 中取出时 写入流的代码工作正常 但我需要访问 VPC 内的资源
  • 缓存控制标头和浏览器缓存 IIS7

    我在 IIS7 的网站上使用 Google Page Speed 我想知道如何设置 利用浏览器缓存 以下资源缺少缓存过期时间 利用代理缓存 考虑向以下资源添加 Cache Control public 标头 以web config中的sys
  • 在线性回归模型中包含误差项

    我想知道是否有一种方法可以包含线性回归模型的误差项 例如 r lm y x1 x2 代码r lm y x1 x2 意味着我们将 y 建模为 x1 和 x2 的线性函数 由于模型并不完美 因此会存在残差项 即模型未能拟合的剩余项 在数学方面
  • linq orderby 使用属性名称字符串

    我有一个需要订购的清单 例如 var list someelements 我还有一个参数 它说明我应该按哪个属性和哪个方向订购列表数据 例如 var sortby Name var sortdirection desc 我想知道是否可以将字
  • 如何让 AutoMapper 不缓存映射对象?

    当 AutoMapper 遇到一个已经映射的对象时 它似乎会再次使用该对象 而不是尝试重新映射它 我相信它这样做是基于 Equals 我有一棵正在绘制地图的树 因此 一个具有一些属性和子节点的节点 多个节点具有相同的值 Equals 因为它
  • 渲染后如何将焦点设置在输入字段上?

    渲染组件后将焦点设置在特定文本字段上的反应方式是什么 文档似乎建议使用 refs 例如 Set ref nameInput 在渲染函数中的输入字段上 然后调用 this refs nameInput getInputDOMNode focu
  • 如何使用 openjdk:7 Docker 镜像和 Gradle 包装器避免“EC 参数错误”?

    这个 Dockerfile FROM openjdk 7 WORKDIR restdocs RUN git clone https github com spring projects spring restdocs git restdoc
  • Jackson反序列化convertValue与readValue

    我有一个包含 JSONObjects 的 org json JSONArray 我正在尝试将它们映射到 POJO 我知道我想要映射到的 POJO 的类型 我有两个选择 我正在尝试找出哪个性能更好 选项1 ObjectMapper mappe
  • 在 php 中使用断言进行类型检查?

    我使用异常抛出函数对 php 中的类中的参数进行了一些检查 我有进行基本检查的功能 in array等 并在 false 时抛出异常 所以我可以做assertNumeric argument argument is not numeric
  • 使用 AngularJS 和 Highlight.js 进行动态语法突出显示

    我正在构建一个网站来说明常见的应用程序漏洞 例如 SQL 注入 我在用AngularJS and 高亮 js创建交互式示例 如何让 AngularJS 和highlight js 都更新我的代码片段 Example 这把小提琴 http j
  • 重复使用表格单元格中的 UIswitch

    我的 uiswitch 有问题UITableViewCell每当我更改属于特定部分的特定单元格中的开关值时 所有其他具有相同部分的单元格inexPath row改变 请帮忙 这是我的代码cellForRowAtIndexPath metho
  • 把一个偶数分成N份,每份都是2的倍数

    假设我有号码100我需要将其分为 N 部分 每个部分最初不应超过 30 因此初始分组为 30 30 30 余数 即 10 将通过连续向每个组添加 2 来分配到这三个组中 从而确保每个组都是 2 的倍数 因此 所需的输出应类似于 34 34
  • html DOM 节点限制

    我正在开发一个终端模拟器以获取乐趣 并了解后端的基础知识和运行 然而 我不断遇到前端的性能问题 大家可能都知道 终端窗口中的每个字符都可以有不同的样式 颜色 背景 粗体 下划线等 所以我的想法是使用 span 对于视图窗口中的每个字符 并在
  • 如何获取 Angular Material 滑块的当前值?

    我的问题与获取角度 2 中的 mdslider 值 https stackoverflow com questions 46906219 get mdslider value in angular 2因为我需要将滑块的值传递给组件 而不是