[Dúvida] Botões de salvar e excluir não funcionam corretamente.

link do código/projeto: https://github.com/jlateles/memotecaAngular

Meu back-end roda porém não funciona. O botão de salvar e o botão de excluir também não funcionam.

O vs code não apresenta erro algum no código, mas mesmo assim não funciona.
Verifiquei as rotas do meu back-end e aparentemente está tudo ok.

Olhei o console do navegador (uso o Microsoft Edge) e foi apresentados os seguintes 9 erros:

Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received listarPensamento:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

Alguém sabe como posso solucionar isso?

Olá Júlia, tudo bem?

Baixei seu projeto e fiz alguns testes. Olha, o botão de salvar aqui funcionou de boas, mas o de excluir estava com um probleminha mesmo.

No pensamento.service.ts, no método excluir, a url estava diferente, por isso não estava sendo encontrada.

Modifique de:

const url = `${this.API}/excluir/${id}`

para:

const url = `${this.API}/${id}`

Além disso, percebi que a versão do JSON-Server que você está utilizando espera receber o id como string e não como number, por isso precisamos fazer as seguintes modificações:

Nos arquivos excluir-pensamento.component.ts, editar-pensamento.component.ts e pensamento.component.ts, mude a propriedade id do objeto e, ao invés de 0, passe como valor string vazia, assim:

pensamento: Pensamento = {
    id: '',
    conteudo: '',
    autoria: '',
    modelo: ''
  }

Nos arquivos excluir-pensamento.component.ts eeditar-pensamento.component.ts no método ngOnInit, remova a função parseInt:

ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id')
    this.service.buscarPorId(id!).subscribe((pensamento) => {
      this.pensamento = pensamento
    })
  }

Na interface pensamento.ts, mude o tipo do id de number para string:

export interface Pensamento
 {
      id?: string
      conteudo: string
      autoria: string
      modelo: string
 }

No arquivo pensamento.service.ts, mude o tipo do parâmetro id dos métodos excluir e buscarPorId de number para string:

excluir(id: string): Observable<Pensamento> {
    const url = `${this.API}/${id}`
    return this.http.delete<Pensamento>(url)
  }

  buscarPorId(id: string): Observable<Pensamento> {
    const url = `${this.API}/${id}`
    return this.http.get<Pensamento>(url)
  }

Testei e consegui excluir os pensamentos e sem erros no console, dessa vez! :)

Faça esses ajustes e veja se funciona aí também.

Qualquer dúvida adicional, continuo à disposição para ajudar!

P.S.: Adorei os pensamentos que você adicionou <3

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado. ✓

Mergulhe em programação