Angular Slider - '值'不存在于类型'HTMLElement'上答案

【问题标题】：Angular Slider - 'value' does not exist on type 'HTMLElement'Angular Slider - '值'不存在于类型'HTMLElement'上
【发布时间】：2020-06-05 03:55:13
【问题描述】：

我创建了一个输入滑块。当我沿着条形滑动时，它会显示一个值编号。我的代码适用于 javaScript：sample in jsfidder

但是当我使用 Angular 时，它不起作用！请看my sample here

请帮忙。谢谢

HTML

<div class="range-wrap">
        <input id="range" type="range" min="1" max="100" value="1" step="1" (change)="onChangeDevidesRange()">
        <div class="devices-range-value" id="devices-range"></div>
    </div>

.ts

onChangeDevidesRange() {
  const
    range = document.getElementById('range[value]'),
    devicesRange = document.getElementById('devices-range'),
    setValue = ()=>{
        const
            newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
            newPosition = 10 - (newValue * 0.2);
        devicesRange.innerHTML = `<span>${range.value}</span>`;
        devicesRange.style.left = `calc(${newValue}% + (${newPosition}px))`;
    };
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);

document.getElementById("range").oninput = function() { this.style.background = '线性渐变（向右，红色 0%，' + this.value + '%，#fff ' + this.value + '%，白色 100%）' }

CSS

.range-wrap{
    /* width: 500px; */
    position: relative;
}
#range {
  width: 100%;
}
.devices-range-value{
    position: absolute;
    top: 30px;
}
.devices-range-value span{
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: white;
    color: #000;
    font-size: 12px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);

}

【问题讨论】：

首先，如果您仍在使用 document.getElement，您可以留在 Javasript jQuery 世界中。如果您处于角度世界中，则应该使用 ViewChild 执行此操作。如果您想在 Angular 世界中编写 javascript，请快速入门 document.getElementById('range[value]') as any

标签： javascript angular

【解决方案1】：

尝试在 Angualr 中将 elementRef 用于 Dom 事物：

    import { Component, VERSION , ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private elementRef: ElementRef){

  }
 onChangeDevidesRange() {
  const
    range = this.elementRef.nativeElement.querySelector('#range'),
    devicesRange = this.elementRef.nativeElement.querySelector('#devices-range'),
    setValue = ()=>{
        const
            newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
            newPosition = 10 - (newValue * 0.2);
        devicesRange.innerHTML = `<span>${range.value}</span>`;
        devicesRange.style.left = `calc(${newValue}% + (${newPosition}px))`;
    };
this.elementRef.nativeElement.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue); 
 }
}

【讨论】：