ไม่มีคุณสมบัติ 'value' ในประเภท 'EventTarget'

ฉันใช้ TypeScript เวอร์ชัน 2 สำหรับโค้ดคอมโพเนนต์ Angular 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);
  }
}

คุณต้องบอก TypeScript อย่างชัดเจนถึงประเภทของ 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./*...*/)

สิ่งนี้จะทำให้ TypeScript รู้ว่าองค์ประกอบคือ a textareaและจะรู้ถึงคุณสมบัติค่า

สิ่งเดียวกันนี้สามารถทำได้กับองค์ประกอบ HTML ทุกประเภทเมื่อใดก็ตามที่คุณให้ข้อมูลเพิ่มเติมเกี่ยวกับประเภทของ TypeScript มันจะให้คำแนะนำที่เหมาะสมและแน่นอนว่ามีข้อผิดพลาดน้อยลง

เพื่อให้ง่ายขึ้นในอนาคตคุณอาจต้องการกำหนดเหตุการณ์โดยตรงด้วยประเภทของเป้าหมาย:

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

นี่คือแนวทางง่ายๆที่ฉันใช้:

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

ข้อผิดพลาดที่แสดงโดยคอมไพเลอร์ TypeScript หายไปและโค้ดทำงานได้

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

บางทีสิ่งที่ต้องการข้างต้นอาจช่วยได้ เปลี่ยนตามรหัสจริง ปัญหาคือ ........ เป้าหมาย ['ค่า']

ฉันเชื่อว่ามันต้องได้ผล แต่วิธีใดก็ตามที่ฉันไม่สามารถระบุได้ แนวทางอื่นสามารถ

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

นี่เป็นอีกวิธีง่ายๆที่ฉันใช้;

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

เนื่องจากฉันมีคำถามสองข้อที่ค้นหาปัญหาของฉันด้วยวิธีที่แตกต่างกันเล็กน้อยฉันกำลังจำลองคำตอบของฉันเผื่อว่าคุณจะจบลงที่นี่

ในฟังก์ชันที่เรียกว่าคุณสามารถกำหนดประเภทของคุณด้วย:

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

สิ่งนี้จะถือว่าคุณสนใจในtargetทรัพย์สินเท่านั้นซึ่งเป็นกรณีที่พบบ่อยที่สุด หากคุณต้องการเข้าถึงคุณสมบัติอื่น ๆ ของeventโซลูชันที่ครอบคลุมมากขึ้นเกี่ยวข้องกับการใช้ตัว&ดำเนินการแยกประเภท:

event: Event & { target: HTMLInputElement }

คุณยังสามารถเจาะจงมากขึ้นและแทนที่จะใช้HTMLInputElementคุณสามารถใช้เช่นHTMLTextAreaElementสำหรับ textareas

นี่เป็นอีกหนึ่งวิธีในการระบุ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);
    }
}