प्रॉपर्टी 'मान' प्रकार 'EventTarget' पर मौजूद नहीं है

Question

मैं एक कोणीय 2 घटक कोड के लिए टाइपस्क्रिप्ट संस्करण 2 का उपयोग कर रहा हूं।

मुझे त्रुटि मिल रही है "संपत्ति 'मान नीचे दिए गए कोड के लिए' EventTarget 'प्रकार पर मौजूद नहीं है, क्या समाधान हो सकता है। धन्यवाद!

e.target.value.match (/ \ S + / g) || [])। लंबाई

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
selector: 'text-editor',
template: `
<textarea (keyup)="emitWordCount($event)"></textarea>
 `
 })
  export class TextEditorComponent {
   @Output() countUpdate = new EventEmitter<number>();

emitWordCount(e: Event) {
    this.countUpdate.emit(
        (e.target.value.match(/\S+/g) || []).length);
}
}

Answer 1

आपको टाइपस्क्रिप्ट को HTMLElement के प्रकार को स्पष्ट रूप से बताने की आवश्यकता है जो आपका लक्ष्य है।

इसे करने का तरीका एक सामान्य प्रकार का उपयोग करके इसे एक उचित प्रकार में डालना है:

this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)

या (आप की तरह)

this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)

या (फिर, वरीयता की बात)

const target = e.target as HTMLTextAreaElement;

this.countUpdate.emit(target.value./*...*/)

इससे टाइपस्क्रिप्ट को पता चलेगा कि तत्व एक है textareaऔर उसे मूल्य संपत्ति का पता चल जाएगा।

ऐसा ही किसी भी प्रकार के HTML तत्व के साथ किया जा सकता है, जब भी आप टाइपस्क्रिप्ट को उनके प्रकारों के बारे में थोड़ी और जानकारी देते हैं तो यह आपको उचित संकेत और निश्चित रूप से कम त्रुटियों के साथ वापस भुगतान करता है।

भविष्य के लिए इसे आसान बनाने के लिए आप किसी घटना को सीधे उसके लक्ष्य के प्रकार के साथ परिभाषित कर सकते हैं:

// create a new type HTMLElementEvent that has a target of type you pass
// type T must be a HTMLElement (e.g. HTMLTextAreaElement extends HTMLElement)
type HTMLElementEvent<T extends HTMLElement> = Event & {
  target: T; 
  // probably you might want to add the currentTarget as well
  // currentTarget: T;
}

// use it instead of Event
let e: HTMLElementEvent<HTMLTextAreaElement>;

console.log(e.target.value);

// or in the context of the given example
emitWordCount(e: HTMLElementEvent<HTMLTextAreaElement>) {
  this.countUpdate.emit(e.target.value);
}

Comments

@smnbbrv मेरा मामला एक img फ़ाइल स्थान है, तो SO टेम्पलेट के आधार पर img प्रदर्शित करें : <img [src]="url"> <br/> <input type='file' (change)="showImg($event)">घटक: ... this.url = event.target.result;कभी-कभी काम करता है, जब यह गलत नहीं होता है error TS2339: Property 'result' does not exist on type 'EventTarget'जैसा कि आपने सुझाव दिया है कि TS को इसके बारे में अधिक बताएं, जिस स्थान पर HTMLTextAreaElementमैंने कोशिश की थी, HTMLInputElementउसके बाद और target.valueनहीं गलत लेकिन छवि प्रदर्शित नहीं हो रही है।

— 1850 पर जेब 50

मुझे यह देखकर आश्चर्य हुआ कि आप एक प्रकार में पास नहीं हो सकते Event। आपको वास्तव Event<HTMLInputElement>में एक प्रकार के रूप में उपयोग करने में सक्षम होना चाहिए ।

— रोनन

@RoRo घटना समान गुणों निम्नलिखित है: target, currentTargetऔर srcElement; एक को 3 सामान्य प्रकार लिखने की आवश्यकता होगी; भले ही वे Event<T = any, C = any, S = any>उपर्युक्त के लिए डिफ़ॉल्ट प्रकारों का उपयोग करते हों, यह सरल asकथन की तुलना में उपयोग करने के लिए अधिक असुविधाजनक हो सकता है । मैं यह भी सोच सकता था कि सबसे पहले क्या होना चाहिए: targetया currentTarget। इसके अतिरिक्त, कई पुस्तकालय HTML घटना का दुरुपयोग करते हैं और संभावित रूप से उल्लिखित गुणों में वे कुछ भी डाल सकते हैं। संभवतः यही कारण है कि उन्होंने इसे बिल्ट-इन जेनरिक के रूप में नहीं किया

— smnbbrv

मेरी आयन searchbar के लिए, मैं उपयोग कर रहा हूँ(ionChangeEvent.target as HTMLIonInputElement).value as string

— बादल

Answer 2

यहाँ मैं उपयोग किया गया सरल तरीका है:

const element = event.currentTarget as HTMLInputElement
const value = element.value

टाइपस्क्रिप्ट कंपाइलर द्वारा दिखाई गई त्रुटि दूर हो गई है और कोड काम करता है।

Answer 3

fromEvent<KeyboardEvent>(document.querySelector('#searcha') as HTMLInputElement , 'keyup')
    .pipe(
      debounceTime(500),
      distinctUntilChanged(),
      map(e  => {
            return e.target['value']; // <-- target does not exist on {}
        })
    ).subscribe(k => console.log(k));

शायद ऊपर जैसा कुछ मदद कर सकता है। वास्तविक कोड के आधार पर इसे बदलें। मुद्दा है ........ लक्ष्य ['मूल्य']

Answer 4

मेरा मानना ​​है कि यह काम करना चाहिए, लेकिन किसी भी तरह से मैं पहचान नहीं पा रहा हूं। अन्य दृष्टिकोण हो सकता है,

<textarea (keyup)="emitWordCount(myModel)" [(ngModel)]="myModel"></textarea>


export class TextEditorComponent {
   @Output() countUpdate = new EventEmitter<number>();

   emitWordCount(model) {
       this.countUpdate.emit(
         (model.match(/\S+/g) || []).length);
       }
}

Answer 5

यहाँ एक और सरल तरीका है, मैंने इस्तेमाल किया;

    inputChange(event: KeyboardEvent) {      
    const target = event.target as HTMLTextAreaElement;
    var activeInput = target.id;
    }

Answer 6

चूँकि मैं अपनी समस्या के बारे में कुछ अलग तरीके से खोज करने के लिए दो प्रश्नों तक पहुँच गया, इसलिए मैं यहाँ समाप्त होने के मामले में अपने उत्तर की नकल कर रहा हूँ।

तथाकथित फ़ंक्शन में, आप निम्न प्रकार से परिभाषित कर सकते हैं:

emitWordCount(event: { target: HTMLInputElement }) {
  this.countUpdate.emit(event.target.value);
}

यह मानता है कि आप केवल targetसंपत्ति में रुचि रखते हैं, जो सबसे आम मामला है। यदि आपको अन्य गुणों को एक्सेस करने की आवश्यकता है event, तो एक अधिक व्यापक समाधान में &टाइप चौराहे ऑपरेटर का उपयोग करना शामिल है :

event: Event & { target: HTMLInputElement }

आप अधिक विशिष्ट भी जा सकते हैं और उपयोग करने के बजाय HTMLInputElementआप HTMLTextAreaElementtextareas के लिए उदाहरण के लिए उपयोग कर सकते हैं ।

Answer 7

यहाँ निर्दिष्ट करने का एक और तरीका है event.target:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'text-editor',
    template: `<textarea (keyup)="emitWordCount($event)"></textarea>`
})
export class TextEditorComponent {

   @Output() countUpdate = new EventEmitter<number>();

    emitWordCount({ target = {} as HTMLTextAreaElement }) { // <- right there

        this.countUpdate.emit(
          // using it directly without `event`
            (target.value.match(/\S+/g) || []).length);
    }
}