angular - 如何在 ng5 Material slider 值上设置双向数据绑定(bind)

Question

我有一个使用 angular5 和 material 的应用程序。 虽然缺少一些示例和额外的文档，但开发过程相当顺利。直到现在，当我偶然发现这个我无法修复的 slider 问题时。

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

我可以拖动 slider 并查看 thumbLabel 更新。然而，{{myValue}}在 h2 中不更新。

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

我当时在想，这可能与加载“封装”有关，但添加它并没有什么区别。

如何在 slider 值更改时自动更新 {{myValue}}？

编辑:

我使用的是 Angular 5 和 material 5.2.4，而不是 ng6。您可以在以下位置找到代码示例:https://stackblitz.com/edit/angular-material2-issue-bbfwhn

---

编辑2:

我找到了这篇文章:How to get current value of angular material slider .它似乎适用于我的情况，但我希望有一个更优雅的解决方案，而不是在组件中编写一个单独的函数来取回值。

此外，此示例还展示了另一种在视口(viewport)中获取值的简单方法:添加 #matslider到 slider 并使用 {{matslider.value}} 获取 html 中的值.不过我也需要 myValue在组件本身中(传递给提供者)。

---

编辑3:

解决此问题的动态方法(当您有很多 slider 时)扩展了 How to get current value of Angular Material slider?这是:

组件.ts:

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

组件.html:

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

使用此解决方案，您可以像这样添加更多 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 进行双向绑定(bind)。

app.component.html

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

应用程序组件.ts

export class AppComponent {
  value = 1000;
}