如何在 ng5 材质滑块值上设置两种数据绑定

Question

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

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

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

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

我在想，也许这与加载“封装”有关，但添加并没有什么区别。

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

编辑：

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

---

编辑2：

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

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

---

编辑3：

解决此问题的动态方法（当您有很多滑块时），该方法扩展了如何获取 Angular Material 滑块的当前值？这是：

组件.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>

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

<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了双向绑定。

应用程序组件.html

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

app.component.ts

export class AppComponent {
  value = 1000;
}