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

Botão Excluir não está excluindo

Já li algumas dúvidas semelhantes, mas nenhuma delas resolveu o meu caso. Botão cancelar - normal Botão excluir - não funciona, ao verificar no F12, informa que o local http://localhost:3000/pensamentos/id não existe... ou seja, vem a lista toda mas o objeto não.

Erro: HttpErrorResponse (message: "Http failure response for http://localhost:3000/pensamentos/5: 404 Not Found")

Caso precisem do código segue Git: https://github.com/Molinex/Angular14CRUD

Obrigado

2 respostas
solução!

Olá Elison, tudo bem?

Baixei seu projeto e não encontrei nenhum erro do lado do front, o que me levou a investigar nossa API fake, o JSON-Server.

Na versão que utilizei no curso, consigo passar o id como number, mas na versão que você está utilizando percebi que gera esse erro 404.

Testei então passar o id como string conforme documentação e deu certo. Vou te mostrar o passo a passo:

  • Nos arquivos excluir-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: ''
  }
  • No arquivo excluir-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)
  }
  • No arquivo db.json, o id também precisará ser modificado para ficar do tipo string, acrescentando as aspas:
{
  "pensamentos": [
    {
      "id": "1",
      "conteudo": "Lista simulação DB em andamento",
      "autoria": "Molniox",
      "modelo": "modelo1"
    },
    ...
}

Os próximos pensamentos que você criar já terão o id no formato string.

Acessando o endpoint http://localhost:3000/pensamentos/5 agora, não aparece mais o erro 404. 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!

Bons estudos!

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

Deu certo Nay, muito obrigado :)

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