Question

我使用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？

Answer 1

我最喜欢的确定此类排序的方式（不知道它是否正确），只需将其推迟到setTimeout。

  constructor() {
        this.min = 50;
        this.max = 150;
        setTimeout(() => this.value = 150);
  }

您不需要设置实际的时间值。这样做只会确保this.value没有设置，直到下一个更改检测周期。

See here for a live demo.

当值超过100时，如何使用Angular2初始化输入[范围]的值

1 个答案: