Question

我有这个应用程序使用angular5和材料。虽然缺少一些示例和额外的文档，但开发进展相当顺利。直到现在，当我偶然发现这个我无法解决的滑块问题时。

在我的组件中，我声明了一个myValue = 3，用作<mat-slider>的默认值。我还在它上方的<h2>中绘制了这个值。

我可以拖动滑块并查看thumbLabel更新。但是，h2中的{{myValue}}不会更新。

我是否需要手动“获取”更新后的号码？我似乎无法弄清楚他们是如何在docs中做到的。

我在想，也许它与“封装”的加载有关，但添加它没有任何区别。

如果滑块值发生变化，如何自动更新{{myValue}}？

编辑：

我正在使用Angular 5＆amp;材料5.2.4，而不是ng6。您可以在https://stackblitz.com/edit/angular-material2-issue-bbfwhn

上找到代码的示例

EDIT2：

我发现了这篇文章：How to get current value of angular material slider。它似乎适用于我的情况，但我希望有一个更优雅的解决方案，而不是在组件中编写一个单独的函数，只是为了获得价值。

此外，此示例显示了另一种在视口中获取值的简单方法：将#matslider添加到滑块并使用{{matslider.value}}在html中获取值。但是，我在组件本身中也需要myValue（传递给提供者）。

EDIT3：

解决此问题的动态方法（当你有很多滑块时）扩展How to get current value of Angular Material slider?是这样的：

component.ts：

setSlidervalue(event: any){
  this[event.source._elementRef.nativeElement.attributes.valvar.nodeValue] = event.value;
}

component.html：

<h2>slidervalue: {{testValue}}</h2>
<mat-slider min="1" max="5" step="0.5" [(value)]="testValue" (input)='setSlidervalue($event)' valVar="testValue"></mat-slider>

使用此解决方案，您可以添加更多滑块：

<h2>onothervalue: {{someValue}}</h2>
    <mat-slider min="1" max="5" step="0.5" [(value)]="someValue" (input)='setSlidervalue($event)' valVar="someValue"></mat-slider>

建议的解决方案有效，但远非优雅。将这个问题留下来希望找到一种更清洁的方法来解决这个问题。

Answer 1

使用ngModel进行双向绑定。

app.component.html

<mat-slider [(ngModel)]="value"></mat-slider>

app.component.ts

export class AppComponent {
  value = 1000;
}

Answer 2

只需添加“ #slider”

<h2>slider value: {{slider.value}}</h2>
<mat-slider #slider min="1" max="5" step="0.5" thumbLabel></mat-slider>

请参阅：stackblitz

如何在ng5材质滑块值

2 个答案: