-1

A minha dúvida acredito que seja algo simples, porém eu não estou conseguindo chegar a uma lógica..

Eu possuo uma aplicação de vendas, a qual tem uma lista de produtos sendo retornada do firebase, e cada produto deste tem um checkbox ao lado dele para marcação. A lógica é, o cliente seleciona o produto no checkbox e dispara um evento que captura este produto e eu passo ele por NAVPARAMS para a tela de vendas. Até ai tudo bem.

O problema é o seguinte, existirá o caso do cliente selecionar mais de um item por vez para fazer a venda para agilizar o processo. Entendo que eu precisaria criar um array e passar esse array para a próxima tela. Porém eu não estou conseguindo fazer isso, alguém poderia me dar algum exemplo de código ou sugerir alguma melhoria ? Vou deixar abaixo o meu código ts e meu html.

TS:

//FUNÇÃO QUE CAPTURA O VALOR DO CHECKBOX E ARMAZENA NA VARIÁVEL PARA PASSAR COMO PARAMETRO

produtoEscolhido(produto, isChecked){
    if(isChecked) {
      this.produtosEscolhidos = produto;
      let produtos = [this.produtosEscolhidos];
      console.log(produtos);
    }
}

HTML:

//LISTA DE PRODUTOS COM O EVENTO PRODUTO ESCOLHIDO QUE CAPTURA O ITEM QUE O USUÁRIO SELECIONOU

<ion-list *ngFor="let produto of produtosLista | async">
    <ion-item>
        <ion-label>{{produto.descricao}}</ion-label>
        <ion-checkbox [(ngModel)]="produto.selecionado" (ionChange)="produtoEscolhido(produto, $event.checked)"></ion-checkbox>
    </ion-item>
</ion-list>

    <button ion-button color="dark" (click)="escolherProdutos()">Escolher</button>
</ion-content>

2 Respostas 2

0

Em vez de capturar os valores do checkbox no ionchange, você pode capturar no button, na função escolherProdutos(), por exemplo. Você pode verificar todos os seus produtos e identificar quais estão selecionados, para em seguida passá-los como parâmetro.

escolherProdutos(){

  let produtosEscolhidos = [];

  for(let i=0; i<this.produtosLista.length; i++){
    if (this.produtosLista[i].selecionado){
      produtosEscolhidos.push(this.produtosLista[i]);
    }    
  }

}
6
  • Renata eu fiz como você passou ai, mas nesse caso o que ficaria dentro do meu ionchange? escolherProdutos(){ let produtosEscolhidos = []; for(let i=0; i < this.produtosLista.length; i++){ if (this.produtosLista[i].selecionado){ produtosEscolhidos.push(this.produtosLista[i]); console.log("Os produtos escolhidos são " +this.produtosLista[i]); }else{ console.log("erro"); } } } No meu console.log não está retornando nada.. 27/08/2018 às 11:04
  • Você não precisa incluir nenhuma função no seu ionchange. Como você vai aguardar o usuário escolher todos os itens que ele precisa, a função ficaria, por exemplo, no button, que você já tem após o ion-list.
    – Renata
    27/08/2018 às 12:58
  • Ok, vou fazer mais uns testes. Acompanhando o código que mandei acima, deveria me retornar algo no console correto ? Ou eu fiz alguma coisa errada? 27/08/2018 às 18:32
  • Eu faria uma pequena alteração, deixando o console.log após o for. escolherProdutos(){ let produtosEscolhidos = []; for(let i=0; i<this.produtosLista.length; i++){ if (this.produtosLista[i].selecionado){ produtosEscolhidos.push(this.produtosLista[i]); } } console.log("Os produtos escolhidos são " + produtosEscolhidos); }
    – Renata
    27/08/2018 às 21:17
  • Quando eu tento adicionar a propriedade length ao código, ele me retorna o seguinte erro de sintaxe : [ts] Property 'length' does not exist on type 'Observable<Produtos[]>'. E executando a função em um botão de teste, ele não chama nada no console. Eu acredito que ele não esteja percorrendo a lista, por conta desta propriedade. Alguma coisa que eu possa fazer para resolver? 29/08/2018 às 11:39
-2

Esta duvida sanou outra que tinha aqui... Valeu pela resposta!!!

escolherProdutos(){

  let produtosEscolhidos = [];

for(let i=0; i<this.produtosLista.length; i++){
    if (this.produtosLista[i].selecionado){
    produtosEscolhidos.push(this.produtosLista[i]);
    }    
  }
}

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 .