将 HTML 滑块与 Angular 2 组件连接起来

Question

我在我的 Angular 2 应用程序中使用 PrimeNG 作为 UI 库。在某个组件中，我需要有一个滑块组件。因此，我使用了相应的 PrimeNG 滑块组件，如下所示：

<p-slider [(ngModel)]="this.adjustedCalculation.predictionYear"></p-slider>

这完美地工作。

但是，我注意到这个组件在带有触摸屏的设备上坏了。所以我需要找到一个替代品。

我遇到了此处描述的“范围”类型的标准 HTML 5 输入，并添加了如下标记：

<input type="range" name="points" id="points" value="50" min="0" max="100" data-show-value="true" data-popup-enabled="true" />

如何将此输入元素与我的 Angular 2 组件变量连接this.adjustedCalculation.predictionYear？

我希望用户选择的值在此变量中表示。

更新：

我[(ngModel)]按照建议添加并且它有效。下一点是我想控制这个输入元素的最小值和最大值。考虑之前版本的 PrimeNG 滑块：

<p-slider [(ngModel)]="this.adjustedCalculation.predictionYear" [min]="this.displayedCalculation.predictionYear - 10" [max]="this.displayedCalculation.predictionYear + 10"></p-slider>

我该如何传递“predictionYear - 10”这个表达式？+ 10 到那个输入元素？让我知道我是否应该为此提出一个新问题。

谢谢！

Answer 1

只需NgModel像在p-slider组件中使用指令一样使用指令：

<input type="range" name="points" id="points" value="50" min="0"
max="100" data-show-value="true" data-popup-enabled="true" 
[(ngModel)]="this.adjustedCalculation.predictionYear" />

至于最小值和最大值，只需使用属性绑定为min和max属性赋值：

[min]="displayedCalculation.predictionYear - 10"
[max]="displayedCalculation.predictionYear + 10"

注意：我看到你this在你的模板中使用，没有必要这样做。

这是工作 Plunker。