"Değer" özelliği, "EventTarget" türünde mevcut değil

Angular 2 bileşen kodu için TypeScript Sürüm 2 kullanıyorum.

Aşağıdaki kod için "EventTarget" türünde "Özellik 'değeri' yok hatası alıyorum, çözüm ne olabilir? Teşekkürler!

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

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'e, hedefiniz olan HTMLElement'in türünü açıkça söylemeniz gerekir.

Bunu yapmanın yolu, onu uygun bir türe dönüştürmek için genel bir tür kullanmaktır:

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

veya (istediğiniz gibi)

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

veya (yine tercih meselesi)

const target = e.target as HTMLTextAreaElement;

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

Bu, TypeScript'in öğenin bir textareaolduğunu bilmesini ve değer özelliğini bilmesini sağlar.

Aynı şey herhangi bir HTML öğesi için de yapılabilir, TypeScript'e türleri hakkında biraz daha fazla bilgi verdiğinizde, size uygun ipuçları ve elbette daha az hata ile geri ödeme yapar.

Geleceği kolaylaştırmak için, bir olayı hedefinin türüyle doğrudan tanımlamak isteyebilirsiniz:

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

İşte kullandığım basit yaklaşım:

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

TypeScript derleyicisi tarafından gösterilen hata gitti ve kod çalışıyor.

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

Belki yukarıdaki gibi bir şey yardımcı olabilir. Gerçek koda göre değiştirin. Sorun ........ hedef ['değer']

İşe yaraması gerektiğine inanıyorum, ancak hiçbir şekilde tanımlayamıyorum. Diğer yaklaşım,

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

İşte kullandım başka bir basit yaklaşım;

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

Sorunumu biraz farklı bir şekilde arayan iki soruya ulaştığım için, buraya gelmeniz durumunda cevabımı tekrarlıyorum.

Çağrılan işlevde, türünüzü şu şekilde tanımlayabilirsiniz:

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

Bu, yalnızca targeten yaygın durum olan mülkle ilgilendiğinizi varsayar . Diğer özelliklerine erişmeniz gerekiyorsa event, daha kapsamlı bir çözüm, &tür kavşak operatörünü kullanmayı içerir :

event: Event & { target: HTMLInputElement }

Daha spesifik olarak da gidebilir ve kullanmak yerine HTMLInputElementörneğin HTMLTextAreaElementmetin alanları için kullanabilirsiniz .

İşte belirtmenin bir yolu daha 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);
    }
}