Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Property 'value' does not exist on type 'EventTarget

Bom dia a todos, Tudo bem? Estou tendo problemas com o "$event.target.value" que esta retornando uma mensagem informando que o value não existe. Obrigado desde já.

** Informações: **

  • Componente: photo-list.component.html
  • Linha: 8;
  • Mensagem 1: Property 'value' does not exist on type 'EventTarget'.
  • Mensagem 2: Object is possibly 'null'.

** Código: **

<div class="text-center mt-3 mb-3">
    <form>
        <input
            class="rounded"
            type="search"
            placeholder="search..."
            autofocus
            (keyup)="filter = $event.target.value"
            >
    </form>
</div>

<ap-photos [photos]="photos"></ap-photos>

*Foto: *

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas
solução!

Boa tarde tenta colocar o ?

$event?.target.value 
ou
$event.target?.value 

Pelo que diz o erro o objeto pode ser null.

Opa, tudo bom?

Eu estou desenvolvendo essa msm aplicação acompanhando as vídeo aulas, mas eu não tive esse problema, entretanto eu sei que esse acontecido pode envolver alguns fatores.

Normalmente essa chave $event do Angular é aceita em qualquer componente que se declare do tipo HtmlElement por baixo dos panos, então a propriedade value, não é obrigada a existir em qualquer componente com esse tipo. Algumas versões do Typescript emitem erros como esse seu, porque eles não tem uma total compatibilidade com algumas versões do Angular.

Uma forma rápidas de tentar tratar isso pode ser fazer:

      <input
          class="rounded"
          type="search"
          placeholder="search..."
          autofocus
          (keyup)="filter = $any($event.target).value"
      >

Então, eu acredito que pode ter algo a mais ou a menos entre as versões das dependencias do seu código, ou pode ser alguma atribuição do componente importado do próprio angular HttpClientModule no arquivo app/photos/photos.module.ts.

Mas como eu disse, eu msm não tive problemas como esse até msm baixando o ziper com essa aplicação alurapic disponibilizado pelo professor no início desse capitulo e seguindo apenas o passo a passo dessa aula.

Espero ter ajudado, ;)

Valeu Celso Brito!! Sua resposta me ajudou muito

Essa solução do Celso funcionou aqui comigo:

(keyup)="filter = $any($event.target).value"

Deve estar diferente do que o Flávio fez na aula pq eu não me preocupei em baixar as mesmas versões do Angular e dos demais Pacotes, baixei tudo mais recente.

A solução do Celso me ajudou também. Olhando um tópico do StackOverflow, pelo que entendi, a melhor prática seria receber no component o evento tipado como um HTMLEvent e lá extrair o value. Não teria esse problema caso fosse feito assim.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software