[angular] 'EventTarget'유형에 'value'속성이 없습니다.

Angular 2 구성 요소 코드에 TypeScript 버전 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라는 것을 알게되고 value 속성을 알게됩니다.

TypeScript에 유형에 대한 정보를 조금 더 제공 할 때마다 모든 종류의 HTML 요소에서 동일한 작업을 수행 할 수 있습니다. 그러면 적절한 힌트와 물론 오류가 줄어 듭니다.

미래를 더 쉽게 만들기 위해 대상 유형으로 이벤트를 직접 정의 할 수 있습니다.

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

위와 같은 것이 도움이 될 수 있습니다. 실제 코드를 기반으로 변경하십시오. 문제는 …….. target [ ‘value’]

답변

나는 그것이 작동해야한다고 믿지만 내가 식별 할 수없는 어떤 방식 으로든. 다른 접근 방식은 다음과 같습니다.

<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텍스트 영역에 사용할 수 있습니다 .

답변

지정하는 또 다른 방법은 다음과 같습니다 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);
    }
}

스 니펫 확장