2

Boa tarde,

Gostaria de uma orientação quanto aos Observables.

Estou fazendo um aplicativo para aprendizado, onde eu faço a inserção de produtos em um carrinho de compras, esses produtos no caso seriam verduras.

Vou tentar ser breve na explicação da estrutura do meu projeto para ficar claro.

Os meus produtos estão em um banco de dados (MongoDB) e estão da seguinte forma:

{imagemUrl: "assets/Agriao.jpg", nome: "Agrião", preco: 2, quantidade: 9, _id: 12}
{imagemUrl: "assets/Rucula.jpg", nome: "Rúcula", preco: 2, quantidade: 15, _id: 31}

Quando eu adiciono um produto ao carrinho, cada produto vai como um objeto dessa forma:

{nomeProduto: "Agrião", compraQtd: 1, precoUnitario: 2, _idProduto: [12, 12]}
{nomeProduto: "Agrião&Rúcula", compraQtd: 1, precoUnitario: 2, _idProduto: [12, 31]}

Vocês podem se perguntar porque o _idProduto tem um array do ID do Produto, isso é porque cada pacote de determinado produto contém dois pés do mesmo, a compra no aplicativo não é por quantidade de cada produto e sim por pacote, esses produtos podem ser de um tipo somente (Agrião) ou podem ser mistos (Agrião & Rúcula), por isso eu coloquei em um array os ID's dos respectivos produtos que estão sendo comprados, porque é através desse ID que vou posteriormente debitar da quantidade do estoque dele no banco de dados.

Agora eu vou realmente explicar a minha dificuldade:

Vamos dizer que eu somente adiciono o produto Agrião no carrinho, vou comprar um pacote do mesmo, lembrando que cada pacote contém dois pés do produto, logo, deveria ser debitado dois agriões do estoque da sua quantidade total, que no momento ele possui a quantidade de 9. No meu carrinho, ao finalizar a compra existe o seguinte método:

this.itensDoCarrinho.forEach(pedidoCompra => { //Aqui eu faço um forEach para cada produto que está no meu carrinho.
        console.log("PedidoCompraModel", pedidoCompra);
        pedidoCompra._idProduto.forEach(idProduto => { //Aqui eu faço um forEach para cada ID que está dentro do meu pedidoCompra.
          this.produtoService.getProduto(idProduto) //Aqui eu faço uma requisição para o meu banco através do HttpClient para me trazer informações do produto que estou querendo debitar do estoque.
            .subscribe(produtoDados => {
              console.log("Produto Dados do GetProduto", produtoDados);
              this.produtoService.updateQtdProduto(produtoDados._id, { "quantidade": produtoDados.quantidade - pedidoCompra.compraQtd }) //Aqui é onde eu faço o debito da quantidade comprada relativa ao ID informado e dou um patch atualizando o banco de dados.
                .subscribe(produtoDadosAtualizado => {
                  console.log("Produto Dados do UpdateQtdProduto", produtoDadosAtualizado);
                });
            });
        });
      });

Porém, o que acontece é que ele somente faz o debito de UMA QUANTIDADE do produto em questão, e não de duas quantidades, como eu gostaria que fosse. Eu tenho a impressão que isso tem algo a ver com o assincronismo dos Observables.

Vou colocar abaixo uma foto do console.log da operação acima para vocês entenderem com mais clareza o que aconteceu.

Imagem do Console.log do exemplo citado

Alguém saberia me orientar o do porque isso está acontecendo? O que eu poderia fazer para que fosse debitado corretamente a quantidade do produto de acordo com os ID's que estão informados no PedidoCompraModel?

Desculpe se eu não consegui ser muito claro na minha explicação, qualquer outra informação, por favor, somente me solicitar.

Obrigado pelo tempo de todos!

1 Resposta 1

1

Realmente o problema é devido aos métodos serem assíncronos.

Uma possível solução seria da seguinte forma:

contaQuantidadeCadaProduto() {
    const produtos: [{ id: number, quantidade: number }] = [];

    this.itensDoCarrinho.map(pedidoCompra => {

        pedidoCompra._idProduto.map(idProduto => {

            // verifica se o produto ja foi adicionado ao array
            let index = produtos.findIndex(p => p.id == idProduto);

            // se o produto for encontrado, incrementa a quantidade, caso contrario adiciona
            if (index !== -1) {
                produtos[index].quantidade++;
            } else {
                produtos.push({id: idProduto, quantidade: 1});
            }
        });
    });

    this.BuscaProdutosEAtualiza(produtos);
}

BuscaProdutosEAtualiza(produtos: [{ id: number, quantidade: number }]) {
    produtos.map(p => {
        this.produtoService.getProduto(p.id)
            .subscribe(produtoDados => {
                this.atualizaQuantidadeProduto(produtoDados, p.quantidade);
            });
    });
}

atualizaQuantidadeProduto(produtoDados, compraQuantidade) {
    this.produtoService.updateQtdProduto(produtoDados._id, { "quantidade": produtoDados.quantidade - compraQuantidade })
    .subscribe(produtoDadosAtualizado => {
        // produto atualizado
    });
}

Dessa foma isolamos as funções e as atualizações de quantidade serão feitas uma vez para cada produto, resolvendo o problema das muitas requisições assíncronas.

Qualquer dúvida sobre o código pode comentar aqui.

2
  • Cara, que show! Com certeza vou aprender muito com essas situações de agora em diante! Muito obrigado pela aula e pelo seu tempo! Muito Grato! Commented 11/12/2019 às 2:10
  • É isso aí! Boa sorte e bons estudos :) Commented 11/12/2019 às 19:43

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 .