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);
}