将 HTML 滑块与 Angular 2 组件连接

Question

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

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

这非常有效。

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

我遇到了here 描述的“范围”类型的标准 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”resp。 + 10 到那个输入元素？ 让我知道是否应该为此提出一个新问题。

谢谢！

Answer 1

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

<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，没有必要这样做。

这里是working Plunker。