我使用AngularJS遇到了这种情况，这就是发布How to initialize the value of an input[range] using AngularJS when value is over 100的原因。
我想知道Angular2可以更好地初始化默认范围[0,100]和[min，max]范围内的值。
我试图学习Angular2的代码几乎是前一篇文章的翻译:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.min.js"></script>
<script>
(function (app) {
app.AppComponent = ng.core.Component({
selector: 'my-app',
template: ' {{ctrl.min}}<input type="range" [(ngModel)]="ctrl.value" min="{{ctrl.min}}" max="{{ctrl.max}}" />{{ctrl.max}}<br/>value:{{ctrl.value}}'
})
.Class({
constructor: function() {
this.ctrl = { min:50, max:150, value:150};
}
});
})(window.app || (window.app = {}));
(function (app) {
document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>运行此代码段可得到以下结果:
滑块在位置100，但应在位置150。
预期结果是:
有没有一种方法可以一致地设置3个值(最小值，最大值和值)，而该值不受[0,100]的限制？
是否可以在初始化范围之后并且在设置初始值之前更新DOM？
最佳答案
我最喜欢的确定排序的方式(不知道这是正确的方式)是简单地用setTimeout延迟它。
constructor() {
this.min = 50;
this.max = 150;
setTimeout(() => this.value = 150);
}
您不需要设置实际的时序值。这只会确保在下一个更改检测周期之前没有设置
this.value。See here for a live demo.