0

Trouxe informações da api pelo id, porém coloquei direto no ngOnInit dentro do metodo o número do id. Queria saber como faço para buscar esses produtos no input ao apertar o botão?

Tenho a service que traz os produtos pelo id da API

listarProdutos(id: number):Promise<IResponse<any>>{
return this.http.get<IResponse<any>>(`mercado/produto/${id}`).toPromise();
}

E o component que está recebendo está da seguinte forma:

public produtos: ProdutosModel = [];

ngOnInit(): void{
this.listarProdutos(1);
}

contrutor(private produtoService: ProdutoService){}

listarProdutos(id){
this.produtoService.listarProdutos(id).then(response => {
this.produtos = response.data;
});}

E o HTML está assim:

<input type="text"> <button (click)="buscar">Buscar</button>

<table *ngFor="let produtos of produtos">
<tr>
<td>id</td>
<td>nome</td>
<td>data vencimento</td>
</tr>
<tr>
<td>{{produtos.id}}</td>
    <td>{{produtos.nome}}</td>
    <td>{{produtos.dataVencimento}}</td>
</tr>

Também tenho a model

export class ProdutosModel{
id: number;
nome: string;
dataVencimento: string
}

2 Respostas 2

0

É bem simples isso, aliás tem várias formas de fazer, uma delas é passando um template variable no input e passar o valor que for digitado no parâmetro da função buscar():

<input type="text" #ID> <button (click)="buscar(ID)">Buscar</button>

Na função buscar() vc executa o service conforme o valor recebido no parâmetro:

public produtos: ProdutosModel[] = [];

ngOnInit(): void{}

construtor(private produtoService: ProdutoService){}

listarProdutos(id){
  this.produtoService.listarProdutos(id).then(response => {
    this.produtos = response.data;
  });
}

buscar(id: any){
  let _id = id.value;

  this.listarProdutos(_id);
}

OBS: O mais correto no parâmetro do método listarProdutos() no service é ser do tipo string e não number, pq vai pegar esse parâmetro de um input, e todo valor de um input o tipo é string.

0
0

É bem simples vou dá alguns exemplos:

Service:

listarProdutos(id: number){
return this.http.get<Mercado>(this.url + idB);
}

Component:

 constructor(private servico: HomeService) { }
  
  id: any;
  mercado: any;
  
  

    buscarId(){
        this.servico.listarProdutos(this.id).subscribe(objetos => this.mercado= objetos);
      }

Id: <input [(ngModel)]="id" type="text">
<button (click)="buscarId()">Botão</button>
<ul *ngIf="mercado!= null">
  <li>{{mercado.id}}</li>
  <li>{{mercado.nome}}</li>
</ul>

Vou deixar um link aqui para te ajudar: https://digitalinnovation.one/artigos/busca-por-id-angular-8-basico

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 4/10/2021 às 17:54

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 .