Question

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

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

这完美无缺。

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

我遇到了＆＃34; range＆＃34;类型的标准HTML 5输入。描述了here并添加了它的标记：

<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>

我如何传递表达式＆＃34; predictionYear - 10＆＃34; RESP。 + 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，无需执行此操作。

这是working Plunker。

使用Angular 2组件连接HTML滑块

1 个答案: