“元素”類型上不存在屬性“值”

Question

我正在使用 Angular 創建圖像過濾器，但出現以下錯誤。

image = document.querySelector('img');
filterControl = document.querySelectorAll('input[type=range]');

applyfilter(){
let computedFilters ='';
this.filterControl.forEach(function(item,index) {
  computedFilters += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ')';
});
this.image.style.filter = computedFilters;
}

錯誤：

item.value (Property 'value' does not exist on type 'Element'.ts(2339))

這是我的 HTML

    <input id="sepia" type="range" onchange="applyFilter()" [(ngModel)]="sepia"  data-filter="sepia" data-scale="%" step="0.1" min="0" max="1"> Sepia
                <span id="Amount_sepia">({{sepia}})</span><br/>

為什么我會收到此錯誤？

Answer 1

Element類型適用於所有html 元素（不僅是輸入），是的 - 該類型中沒有value屬性。 為了享受使用 TypeScript 的樂趣，我們需要了解有時將 object 強制轉換為特定類型是必須的。 在我們的用例中，類型是HTMLInputElement ，它表示輸入（具有value屬性）。 所以：

this.filterControl.forEach(function(item: HtmlInputElement, index: number) {
  if (!item) return; // maybe there are other elements which are not inputs like div, span, etc.
  computedFilters += item.getAttribute('data-filter') + '(' + item.value + 
  item.getAttribute('data-scale') + ')';
});