javascript - TypeScript'te EventTarget türünde 'value' özelliği yok

Yani aşağıdaki kod Angular 4'te ve neden beklediğim gibi çalışmadığını bir türlü çözemedim.

İşte işlemcimin bir kesiti:

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //this wont work
}

HTML öğesi:

<input type="text" class="form-control" (input)="onUpdatingServerName($event)">

Kod bana hatayı veriyor:

Özellik 'value', 'EventTarget' türünde mevcut değil.

Ama console.log'da görülebileceği gibi, bu değer event.target'te mevcut.

Cevap #1

Buradaki event.target, tüm HTML öğelerinin ebeveyni olan bir HTMLElement'dir, ancak value özelliğine sahip olacağı garanti edilmez. TypeScript bunu tespit eder ve hata verir. event.target'i uygun HTML öğesine dönüştürerek, value özelliğine sahip olan HTMLInputElement olduğundan emin olun:

(event.target as HTMLInputElement).value

Dokümantasyona göre:

$event yazın

Yukarıdaki örnek, $event'i any türü olarak dönüştürür. Bu, kodu basitleştirir ancak bir bedeli vardır. Olay nesnesinin özelliklerini ortaya çıkarabilecek ve aptalca hataları önleyebilecek bir tür bilgisi yoktur.

[...]

$event şimdi belirli bir KeyboardEvent. Tüm öğelerin bir value özelliği yoktur, bu nedenle target bir giriş öğesine dönüştürülür.

(Vurgulama bana aittir)

Cevap #2

HTMLInputElement'i bir etkinlik türüne genel olarak geçmek de işe yaramalı:

onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event);
  this.newserverName = event.target.value;
}

Cevap #3

İşte benim için işe yarayan bir başka çözüm:

(event.target as HTMLInputElement).value

Bu, TS'ye event.target'in doğası gereği bir value'ya sahip bir HTMLInputElement olduğunu bildirerek hatayı ortadan kaldırmalı. Belirtmeden önce, TS muhtemelen yalnızca event'in bir HTMLInputElement olduğunu biliyordu, bu nedenle TS'ye göre klavyeden girilen target rastgele bir şekilde eşlenmiş ve her şey olabilecek bir değerdi.

Cevap #4

React ile benzer bir TypeScript hatası için bir çözüm arıyordum:

TypeScript'te EventTarget türünde 'dataset' özelliği mevcut değil

React'te tıklanan bir buton öğesinin event.target.dataset'ine ulaşmak istemiştim:

<button
  onClick={onClickHandler}
  data-index="4"
  data-name="Foo Bar"
>
  Delete Candidate
</button>

İşte dataset değerini TypeScript üzerinden nasıl "var" hale getirebildiğim:

const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  const { name, index } = (event.target as HTMLButtonElement).dataset
  console.log({ name, index })
  // do stuff with name and index…
}

Cevap #5

Şablonda -

`(keyup)="value2=$any($event.target).value"`

bileşen içinde -

getInput(event: Event) {
  this.value1 = (event.target as HTMLInputElement).value;
}

Cevap #6

Ben bunu şu şekilde yapıyorum (bence tip bildirgemeden daha iyi):

onFieldUpdate(event: { target: HTMLInputElement }) {
  this.$emit('onFieldUpdate', event.target.value);
}

Bu, yalnızca en yaygın durum olan target özelliğiyle ilgilendiğinizi varsayar. Eğer event’in diğer özelliklerine erişmeniz gerekiyorsa, daha kapsamlı bir çözüm & türü kesişim operatörünü kullanmayı içerir:

event: Event & { target: HTMLInputElement }

Bu bir Vue.js sürümüdür ancak kavram tüm çerçeveler için geçerlidir. Açıkça daha spesifik olabilirsiniz ve genel bir HTMLInputElement kullanmak yerine örneğin textarea'lar için HTMLTextAreaElement kullanabilirsiniz.

Cevap #7

Bu, benim için ANGULAR HTML Bileşeninde işe yarıyor !!

$any($event.target).value

Kaynak Bağlantı: https://www.tektutorialshub.com/angular/property-value-does-not-exist-on-type-eventtarget-error-in-angular/

Cevap #8

Bu problemi çözmek için, şablondaki tip kontrolünü durdurmak için $any tür dönüşüm fonksiyonunu ($any($event.target).value) kullanın.

Daha fazlasını buradan okuyun.

İlgili makaleler