Como capturar itens de um checkbox e criar um array com os itens capturados

Ionic Framework ionic-v3
1

Pessoal boa tarde, estou com um grande problema e não estou conseguindo sair do lugar. Preciso de ajuda urgente, e conto com a boa vontade dos desenvolvedores mais experientes ou não, para arrumar uma solução para este problema :

Eu tenho uma página, aonde carrego uma lista de produtos dentro de uma div, essa lista vem de um firebase OBSERVABLE. Ocorre que, como é um checkbox de multiplas seleções, eu tenho que dar ao usuário a opção de selecionar vários produtos e no final capturar essas seleções e passá-las a um array, que será enviado ao banco de dados.

Atualmente o que eu consegui foi :

produtoEscolhido(produto){
let produtosMarcados = [];
this.produtoSelecionado = produto;
produtosMarcados.push(this.produtoSelecionado.descricao);
console.log(produtosMarcados);
}

Onde, eu passo o produto como parâmetro, e crio um array, que recebe o produtoSelecionado, que é justamente o produto que o usuário marcou no checkbox. Estou passando esse evento por IONCHANGE. Mas eu só consigo passar um item para dentro do array, ou seja, a cada clique o array muda de conteúdo ao invés de acrescentar um novo conteúdo.

O meu HTML está assim :
<ion-item>

<ion-label fixed class=“label-format”>Escolha os itens</ion-label>

</ion-item>

<button ion-button color=“dark” class=“botao-pesquisar” (click)=“exibirItens()”>

<ion-icon name=“arrow-dropdown”></ion-icon>

</button>

<div *ngIf=“botaoProdutos”>

<ion-list *ngFor=“let produto of produtosLista | async”>

<ion-item>

<ion-label>{{produto.descricao}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{produto.preco}}</ion-label>

<ion-checkbox [(ngModel)]=“selecionado” (ionChange)=“produtoEscolhido(produto)”></ion-checkbox>

<ion-input type=“number” placeholder=“Qtd” color=“dark”></ion-input>

</ion-item>

</ion-list>

<button ion-button color=“dark” (click)=“escolheProdutos()”>Escolher</button>

</div>
produtosLista: Observable<Produtos[]>MEU OBSERVABLE

produto = {} as Produtos;//MEU MODEL DE DADOS

2

Olá,

O evento ionChange controla o estado de uma unica checkbox e não de um conjunto de checkboxes. Então você terá de verificar manualmente se ela está selecionada ou não. Dentro do seu método teria de verificar a variavel selecionado se está selecionado ou não para adicionar no array.

Também o seu array produtosMarcados está sendo recriado toda vez. O escopo dele deveria ser o da classe.

O seu método ficaria assim:

constructor(){
    this.produtosMarcados = [];
}
...
produtoEscolhido(produto){
    if(this.selecionado){
        this.produtosMarcados.push(produto.descricao);
    }
}

é claro que teria ainda que verificar se já existe na lista para não adicionar. E também se o estado de selecionado é igual a false deverá remover o produto da lista. Mas vou deixar para você pensar um pouco :grin:.

3

Rapaz, nem sei como te agradecer em. Eu estava trabalhando nisso a uma semana mais ou menos, mas agora deu certinho o que eu precisava, peço desculpas do inconveniente, estou começando ainda com ionic. Mas agora eu me viro com o restante aqui, a minha dúvida maior era essa. Muito obrigado mais uma vez, e qualquer outra dúvida voltarei a incomodar hehe, obrigado.

4

Legal, disponha ! Mas como este é um forum (oficial) internacional seria legal que o conteúdo fosse em inglês para que todos possam utilizar como recurso para solução de seus problemas. Então se puder tentar postar em inglês seria interessante :grinning:. Valeu !

5

Pode deixar, os próximos posts serão em inglês, mas uma vez muito obrigado.

6

Faz o seguinte, no .html coloca dentro do ion-content:

       {{ produtos | json }}
        <ion-list *ngFor="let produto of produtos">
          <ion-label>{{produto.produtoNome}}</ion-label>
          <ion-checkbox [(ngModel)]="produto.checked"></ion-checkbox>
        </ion-list>

No .ts você declara a variável produtos:

  produtos = [
    { produtoId: 1, produtoNome: 'Laranja', checked: false },
    { produtoId: 2, produtoNome: 'Manga', checked: false },
    { produtoId: 3, produtoNome: 'Mexirica', checked: false },
    { produtoId: 4, produtoNome: 'Melão', checked: false },
    { produtoId: 5, produtoNome: 'Limão', checked: false },
    { produtoId: 6, produtoNome: 'Banana', checked: false }
  ];

Dá play e veja o que acontece. Digamos que o correto é seguir essa idéia.

I hope helped you!