'ইভেন্টট্রেট' টাইপ করে সম্পত্তি 'মান' বিদ্যমান নেই

Question

আমি কৌনিক 2 উপাদান কোডের জন্য টাইপস্ক্রিপ্ট সংস্করণ 2 ব্যবহার করছি am

আমি ত্রুটি পেয়ে যাচ্ছি "নীচে কোডের জন্য" ইভেন্টট্রেট "টাইপটিতে" সম্পত্তি 'মান' বিদ্যমান নেই, কী কী সমাধান হতে পারে। ধন্যবাদ!

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এবং এটি মূল্যরূপ সম্পর্কে জানতে পারে।

এটি যে কোনও এইচটিএমএল উপাদানগুলির সাথেও করা যেতে পারে, আপনি যখনই টাইপস্ক্রিপ্টকে তাদের ধরণের সম্পর্কে কিছুটা আরও তথ্য দেন এটি আপনাকে সঠিক ইঙ্গিত এবং অবশ্যই কম ত্রুটির সাথে অর্থ প্রদান করে।

ভবিষ্যতের পক্ষে এটি আরও সহজ করার জন্য আপনি কোনও ইভেন্টের লক্ষ্যটির প্রকারের সাথে সরাসরি সংজ্ঞা দিতে চাইতে পারেন:

// 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 ফাইলের অবস্থান, তারপরে এসও টেমপ্লেট: <img [src]="url"> <br/> <input type='file' (change)="showImg($event)">উপাদান: ভিত্তিতে img প্রদর্শন করুন, ... this.url = event.target.result;কিছু সময় কাজ করে না, যখন এটি ত্রুটিযুক্ত না হয় আপনি যেমন টিএসকে error TS2339: Property 'result' does not exist on type 'EventTarget'আরও এটি সম্পর্কে বলার পরামর্শ দিয়েছিলেন, সেই জায়গায় যেখানে HTMLTextAreaElementআমি চেষ্টা করেছি HTMLInputElementতখন target.valueআর কিছু হবে না ত্রুটিযুক্ত তবে চিত্র প্রদর্শিত হচ্ছে না।

— Jeb50

আমি অবাক হয়ে দেখেছি যে আপনি কোনও ধরণের মধ্যে পাস করতে পারেন না Event। আপনার Event<HTMLInputElement>টাইপ হিসাবে সত্যই ব্যবহার করা উচিত ।

— রোনান

@RoRo ঘটনা অনুরূপ বৈশিষ্ট্য অনুসরণ করেনি: target, currentTargetএবং srcElement; এক জন্য 3 জেনেরিক টাইপ করা প্রয়োজন; এমনকি যদি তারা Event<T = any, C = any, S = any>উপরে উল্লিখিত ক্ষেত্রে ডিফল্ট ধরণের ব্যবহার করে তবে সাধারণ asবিবৃতিটির চেয়ে এটি ব্যবহার করা আরও অস্বস্তিকর হতে পারে । আমি প্রথম জেনেরিক কী হওয়া উচিত তার একটি সম্ভাব্য পবিত্র মন্দিরটিও কল্পনা করতে পারি: targetবা currentTarget। অধিকন্তু, অনেক লাইব্রেরি এইচটিএমএল ইভেন্টের অপব্যবহার করে এবং উল্লিখিত বৈশিষ্ট্যগুলিতে তারা যা কিছু করতে পারে সম্ভাব্যভাবে তা রাখতে পারে। সম্ভবত এটি কারণগুলির কারণেই তারা বিল্ট-ইন

— জেনেরিক

আমার আয়ন-অনুসন্ধানবারের জন্য, আমি ব্যবহার করছি(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উদাহরণ HTMLTextAreaElementহিসাবে টেক্সারিয়াস ব্যবহার করতে পারেন ।

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);
    }
}