angular - tutorial - La propiedad ''valor'' no existe en el tipo ''EventTarget''

install angular 2

Question

Estoy usando TypeScript Versión 2 para un código de componente Angular 2.

Recibo el error "La propiedad ''valor'' no existe en el tipo ''EventTarget''" para el siguiente código, ¿cuál podría ser la solución? ¡Gracias!

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

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

Aquí está el enfoque simple que utilicé:

let element = event.currentTarget as HTMLInputElement;
let value = element.value;

El error que muestra el compilador TypeScript desapareció y el código funciona.

Answer 2

Aquí hay otro enfoque simple, utilicé;

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

Answer 3

Aquí hay una forma más de especificar 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);
    }
}

Answer 4

Creo que debe funcionar, pero de alguna manera no puedo identificarlo. Otro enfoque puede ser,

<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

Debe indicarle explícitamente a TypeScript el tipo de elemento HTMLE que es su objetivo.

La forma de hacerlo es usar un tipo genérico para convertirlo en un tipo adecuado:

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

o (como quieras)

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

o (de nuevo, cuestión de preferencia)

const target = e.target as HTMLTextAreaElement;

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

Esto le permitirá a TypeScript saber que el elemento es un área de textarea y conocerá la propiedad de valor.

Lo mismo podría hacerse con cualquier tipo de elemento HTML, cada vez que le da a TypeScript un poco más de información sobre sus tipos, le devuelve las sugerencias adecuadas y, por supuesto, menos errores.

Para facilitar el futuro, es posible que desee definir directamente un evento con el tipo de destino:

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

Answer 6

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

Tal vez algo como lo anterior podría ayudar. Cámbielo según el código real. El problema es ........ target [''value'']