Capture and create object array by Ionic 3 checkbox

Asked

Viewed 532 times

0

My doubt I believe is something simple, but I’m not getting to a logic..

I own a sales application, which has a list of products being returned from firebase, and each product of this has a checkbox next to it for marking. The logic is, the customer selects the product at the checkbox and fires an event that captures this product and I pass it by NAVPARAMS to the sales screen. So far so good.

The problem is this, there will be the case of the customer selecting more than one item at a time to make the sale to expedite the process. I understand that I would need to create an array and pass this array to the next screen. But I’m not able to do that, could someone give me some example of code or suggest some improvement ? I will leave down my code ts and my 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>
ionic ionic3

2 answers

0

Instead of capturing checkbox values in ionchange, you can capture on button, in function escolherProdutos(), for example. You can check all your products and identify which ones are selected, then pass them as parameter.

escolherProdutos(){

  let produtosEscolhidos = [];

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

}

  • Renata I did as you passed there, but in this case what would be inside my ionchange? choose products(){ Let productsSchoped = []; for(Let i=0; i < this.productsLista.length; i++){ if (this.productsList[i].selected){ productsSchool.push(this.productsList[i]); console.log("The products chosen are " +this.productsList[i]); }Else{ console.log("error"); } } } In my console.log is not returning anything..

  • You don’t need to include any function in your ionchange. As you will wait for the user to choose all the items he needs, the function would be, for example, on button, that you already have after the ion-list.

  • Okay, I’m going to run some more tests. Following up on the code I sent up, should you return me something on the right console ? Or I did something wrong?

  • I would make a small change, leaving the.log console after. choose Products(){ Let productsChoose = []; for(Let i=0; i<this.productsLista.length; i++){ if (this.productsList[i].selected){ productsChoose.push(this.productsLista[i]); } } console.log("The products chosen are " + products); }

  • When I try to add the length property to the code, it returns the following syntax error : [ts] Property 'length' does not exist on type 'Observable<Products[]>'. E running the function on a test button, it does not call anything on the console. I believe he is not going through the list on account of this property. Anything I can do to resolve?

  • I updated some things in my code : //A List is on the same sales screen, or no longer need to pass parameter, just show the items on a card and send to the database <ion-list *ngFor="Let product of productsLista | async"> <ion-item> <ion-label>{{product.Description}}&nbsp;&nbsp;&nbsp;{{product.preco}}</ion-label> <ion-checkbox></ion-checkbox> </ion-item> <button ion-button Outline color="dark" class="boot-add"> <ion-icon name="add"></ion-icon> </button> </ion-list>

Show 1 more comment

0

This doubt sanou another that had here... Thanks for the answer!!! 

escolherProdutos(){

  let produtosEscolhidos = [];

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

Browser other questions tagged ionic ionic3

You are not signed in. Login or sign up in order to post.