Я использую TypeScript версии 2 для кода компонента Angular 2.

Я получаю сообщение об ошибке «Значение свойства 'не существует для типа' EventTarget '» для приведенного ниже кода. Какое может быть решение. Спасибо!

e.target.value.match (/ \ S + / g) || []). длина

импорт {Component, EventEmitter, Output} из '@ angular / core';

@Компонент({
  селектор: 'текстовый редактор',
  шаблон: `
    
  `
})
экспорт класса TextEditorComponent {
  @Output () countUpdate = new EventEmitter <номер> ();

  emitWordCount (e: Event) {
    this.countUpdate.emit (
            (e.target.value.match (/ \ S + / g) || []). length);
  }
}

user584018

Ответов: 14

Ответы (14)

Вам необходимо явно указать TypeScript тип HTMLElement, который является вашей целью.

Это можно сделать с помощью универсального типа, чтобы привести его к правильному типу:

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

или (как хотите)

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

или (опять же, на ваш выбор)

const target = e.target as HTMLTextAreaElement;

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

Это позволит TypeScript узнать, что элемент является textarea, и он будет знать о свойстве value.

То же самое можно сделать с любым типом 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 = Event & {
  target: T; 
  // probably you might want to add the currentTarget as well
  // currentTarget: T;
}

// use it instead of Event
let e: HTMLElementEvent;

console.log(e.target.value);

// or in the context of the given example
emitWordCount(e: HTMLElementEvent) {
  this.countUpdate.emit(e.target.value);
}

Вот еще один простой подход, который я использовал;

    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 & {target: HTMLInputElement}

Вы также можете указать более конкретный вариант и вместо HTMLInputElement вы можете использовать, например,HTMLTextAreaElement для текстовых полей.

Вместо этого используйте currentValue, поскольку тип currentValue - EventTarget и HTMLInputElement.

Угловой 10 +

Откройте tsconfig.json и отключите strictDomEventTypes.

  "angularCompilerOptions": {
    ....
    ........
    "strictDomEventTypes": false
  }

Вот простой подход, который я использовал:

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

Ошибка, показанная компилятором TypeScript, исчезла, и код работает.

Я считаю, что это должно сработать, но никакими способами я не могу определить. Другой подход может быть,




export class TextEditorComponent {
   @Output() countUpdate = new EventEmitter();

   emitWordCount(model) {
       this.countUpdate.emit(
         (model.match(/\S+/g) || []).length);
       }
}

Вот еще один способ указать event.target:

импорт {Component, EventEmitter, Output} из '@ angular / core';

@Компонент({
    селектор: 'текстовый редактор',
    шаблон: ``
})
экспорт класса TextEditorComponent {

   @Output () countUpdate = new EventEmitter <номер> ();

    emitWordCount ({target = {} as HTMLTextAreaElement}) {// <- прямо здесь

        this.countUpdate.emit (
          // используя его напрямую, без `события`
            (target.value.match (/ \ S + / g) || []). длина);
    }
}

считать $ any ()


Лучший способ - использовать шаблон => добавить идентификатор к вашему вводу, а затем использовать его значение

searchNotary(value: string) {
 // your logic
}

таким образом у вас никогда не будет ошибки Typescript, когда активирована строгая проверка => См. Angular Docs

Угловой 11 +

Откройте tsconfig.json и отключите strictTemplates.

"angularCompilerOptions": { .... ........ "strictTemplates": false }

User TypeScript, встроенный в тип утилиты Partial

В вашем шаблоне

(keyup)="emitWordCount($event.target)"

В вашем компоненте

 emitWordCount(target: Partial) {
    this.countUpdate.emit(target.value./*...*/);
  }

В моем случае было:

const handleOnChange = (e: ChangeEvent) => {
  doSomething (e.target.value);
}

И проблема заключалась в том, что я не предоставил аргумент типа для ChangeEvent, чтобы он знал, что e.target было HTMLInputElement. Даже если я вручную сказал ему, что target был входным элементом (например, const target: HTMLInputElement = e.target), ChangeEvent все равно не знал, что имело смысл.

Решение было сделать:

// добавляем аргумент типа
const handleOnChange = (e: ChangeEvent ) => {
  doSomething (e.target.value);
}
fromEvent(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']

2022 WebDevInsider