角度材质滑块拖动时数据绑定

Answer 1

您可以使用

[value]

属性绑定语法将

someValue

作为

@Input

传递给

MatSlider

。

MatSlider

有一个定义为

@Output

的

input

属性，当

input

值更改时会触发该属性。您可以收听该内容，然后将作为

$event

数据返回的任何内容重新分配给

someValue

。

在这里，尝试一下：

模板：

<mat-slider 
  (input)="someValue = $event.value" 
  [value]="someValue">
</mat-slider>

{{ someValue }}

组件：

import {Component} from '@angular/core';

@Component({...})
export class SliderOverviewExample {
  someValue = 0;
}

这是更新的 示例 StackBlitz 供您参考。

Answer 2

您需要绑定到

input

输出属性才能获取实时数据更改。示例：

<mat-slider
  min="0"
  max="1"
  step="0.01"
  (input)="settingsService.audioTick.volume = $event.value"
  [value]="settingsService.audioTick.volume" />