HTML Range 元素值未使用 Angular6 函数更新答案

【问题标题】：HTML Range element value not updating with Angular6 functionHTML Range 元素值未使用 Angular6 函数更新
【发布时间】：2018-08-15 22:07:54
【问题描述】：

我正在尝试访问一系列 HTML 范围滑块的变化值。

以下是它们的实例化方式：

<li *ngFor="let rgbVal of rgbVals; let i=index">
            {{i}}: {{rgbVal}} <br>
            <div class="color-box" [style.backgroundColor]="rgbVal"></div>
            <div class="slideContainer" >
                <input type="range" min="1" max="100" value="30"  class="slider" id="shade{{i}}" step="1" (change) = "update(i)"  >

            </div>


        </li>

这是我的 .ts 函数中的 Typescript 函数，它应该能够访问滑块的值：

update(i){
var id = "shade"+i;
var slider = document.getElementById(id);
console.log(slider.getAttribute("value"));}

无论我移动哪个滑块或移动了多少滑块，我移动滑块后的值都会保持不变。

有趣的是，如果我运行这段代码：

 update(i){
var sliders = document.getElementsByClassName("slider");
console.log(sliders);}

然后在控制台中打开 HTML 容器并查看每个滑块的值字段，当我移动它时它会更新。

我也试过了

slider = sliders[i];
console.log(slider.getAttribute("value");

并且无论更改如何，它都保持不变，即使该滑块在被视为滑块对象的一部分时允许更新值。

我对此感到困惑，并且在网上找不到任何类似的错误，因此我们将不胜感激。

【问题讨论】：

标签： javascript html angular typescript slider

【解决方案1】：

你的问题是slider.getAttribute("value")读取的是属性的值，而不是输入的值，所以它总是说30。

你需要的是：

update(i: number) {
    const id = `shade${i}`;
    const slider = document.getElementById(id) as HTMLInputElement;
    console.log(slider.value);
}

【讨论】：