0

Preciso excluir um item da minha API, para isso fiz service que executa um delete de acordo com o ID que ele recebe do campo ID da minha aplicação. Também fiz um método que invoca esse serviço e executa ele ao clicar no meu botão de excluir. Tentei fazer um biding que passa o valor digitado no campo para uma variável ID do tipo number, essa variável é usada como parâmetro dentro dos meus métodos.

O que ocorre é que ao clicar no botão eu recebo um erro 404 na execução do delete e o parâmetro que aparece na url é undefined, fiz um console.log para ver o se eu estava retornando o valor de dentro do campo ID, e o resultado foi undefined também. Porém não estou entendendo.

Por favor, podem me apontar o erro e me passar uma breve explicação do que eu fiz errado? Obrigado!

edita-produto.component.html

 <!-- Nav -->
 <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="https://tecnoblog.net/meiobit/wp-content/uploads_legacy/TuxROCK_thumb.png" width="30" height="30" class="d-inline-block align-top" alt="">
      Editor
    </a>
  </nav>
 <!----> 
 <!--Editar Descrição -->
 <div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" [id]="id" id="inputGroup-sizing-sm">ID do Produto</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  </div>
<!---->
<!--Editar Descrição -->
  <div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-sm">Editar Descrição</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  </div>
<!---->

 <!--Editar Preço -->
 <div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Editar Preço</span>
  </div>
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<!---->

<button type="button" class="btn btn-primary">Salvar Edição</button>
<button type="button"  class="btn btn-danger" (click)="deletaProduto(id)">Excluir Produto</button>
  

edita-produto.component.html

import { Component, OnInit } from '@angular/core';
import { Produtos } from 'src/app/interfaces/produtos';
import { ProdutosServices } from '../../services/produtos-services';
import { ListaProdutosComponent } from '../lista-produtos/lista-produtos.component';

@Component({
  selector: 'app-edita-produto',
  templateUrl: './edita-produto.component.html',
  styleUrls: ['./edita-produto.component.css']
})
export class EditaProdutoComponent implements OnInit {

  listaProdutos: ListaProdutosComponent;
  id: number;

  constructor(private produtosServices: ProdutosServices) { }

  ngOnInit(): void {
  }

  // tslint:disable-next-line: typedef
  deletaProduto(id: number){
    console.log(this.id);
    this.produtosServices.deletaProduto(id)
    .subscribe(() => { alert('Produto Deletado!'); },
      () => {alert('Falha ao Deletar Produto!'); });
  }

}

produtos-service

import { Injectable, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Produtos } from '../interfaces/produtos';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ProdutosServices {
  

  constructor(private http: HttpClient) { }

  getListaProdutos(): Observable<Produtos[]>{
    // tslint:disable-next-line: no-unused-expression
    const url = `${environment.produtosApiUrl}/produtos`;
    return this.http.get<Produtos[]>(url);
  }; 

  deletaProduto(id: number): Observable<Produtos>{
    const url = `${environment.produtosApiUrl}/produtos/${id}`;
    return this.http.delete<Produtos>(url);
  }
2

1 Resposta 1

0

Bom, analisando meu código eu vi que eu estava usando o formulário de uma forma errada. Para corrigir isso eu implementei o [(ngModel)] dentro do meu formulário e substitui o span por um input do tipo text que ficou da seguinte maneira:

ID do Produto <input type="text"  [(ngModel)]="id" name="id">

Isso resolveu o problema.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .