Properti 'nilai' tidak ada pada jenis 'EventTarget'

Saya menggunakan TypeScript Versi 2 untuk kode komponen Angular 2.

Saya mendapatkan error "Properti 'nilai' tidak ada pada jenis 'EventTarget'" untuk kode di bawah ini, apa solusinya. Terima kasih!

e.target.value.match (/ \ S + / g) || []).panjangnya

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

Anda perlu memberi tahu TypeScript secara eksplisit jenis HTMLElement yang merupakan target Anda.

Cara melakukannya adalah menggunakan tipe generik untuk mentransmisikannya ke tipe yang tepat:

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

atau (sesuka Anda)

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

atau (sekali lagi, masalah preferensi)

const target = e.target as HTMLTextAreaElement;

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

Ini akan memberi tahu TypeScript bahwa elemennya adalah a textareadan akan mengetahui properti nilai.

Hal yang sama dapat dilakukan dengan semua jenis elemen HTML, setiap kali Anda memberikan TypeScript sedikit lebih banyak informasi tentang jenisnya, Anda akan terbalas dengan petunjuk yang tepat dan tentu saja lebih sedikit kesalahan.

Untuk mempermudah masa depan, Anda mungkin ingin menentukan acara secara langsung dengan jenis targetnya:

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

Inilah pendekatan sederhana yang saya gunakan:

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

Kesalahan yang ditunjukkan oleh compiler TypeScript hilang dan kode berfungsi.

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

Mungkin hal seperti di atas bisa membantu. Ubah berdasarkan kode yang sebenarnya. Masalahnya adalah ........ target ['value']

Saya percaya itu harus berhasil tetapi dengan cara apa pun saya tidak dapat mengidentifikasi. Pendekatan lain bisa jadi,

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

Ini adalah pendekatan sederhana lainnya, yang saya gunakan;

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

Karena saya mencapai dua pertanyaan untuk mencari masalah saya dengan cara yang sedikit berbeda, saya mengulangi jawaban saya jika Anda berakhir di sini.

Dalam fungsi yang dipanggil, Anda dapat menentukan tipe Anda dengan:

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

Ini mengasumsikan Anda hanya tertarik pada targetproperti, yang merupakan kasus paling umum. Jika Anda perlu mengakses properti lain dari event, solusi yang lebih komprehensif melibatkan penggunaan &operator persimpangan tipe:

event: Event & { target: HTMLInputElement }

Anda juga bisa lebih spesifik dan daripada menggunakan HTMLInputElementAnda bisa menggunakan misalnya HTMLTextAreaElementuntuk textareas.

Berikut satu cara lagi untuk menentukan 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);
    }
}