Question

我正在尝试在角度2 app中实现简单的滑块范围值控制。在stackoverflow上，我找到了这个解决方案

<input type="range" min="0" max="100" #ranger (input)="getMyValue()">

export class MyComponent implements OnInit {
  myValue: number;

  constructor() { }    

   getMyValue() {   
      this.myValue = 2;
   }

  ngOnInit() { }

}

这总是将控件设置为默认状态（即50）。当我只使用html而没有绑定html渲染控件时。

<input type="range" min="0" max="100" #ranger value = 2>

我在这里缺少什么？

Answer 1

你可以这样做，

 <input type="range"  id="range"  min="0" max="100"
    value = "{{getMyValue()}}">

并在TS中：

 getMyValue() {   
      return 2;
 }

<强> DEMO

Answer 2

我建议您使用带有ngModel的变量。在模板中调用方法意味着每次Angular运行更改检测时，都会调用方法，因此例如可能会发生这种情况：*ngFor running an infinite loop in angular2从技术上讲，它不是无限循环，而是反复调用方法。特别是如果您正在发出http请求，您的浏览器将崩溃。

那我该做什么：

myValue: number;

ngOnInit() {
  this.myValue = 2;
}

模板：

<input type="range" min="0" max="100" #ranger [(ngModel)]="myValue">

范围组件中的简单绑定

2 个答案: