Pessoal preciso de um help de vocês, por gentileza! Eu estou tentando fazer com que cada produto tenha um componente produto e outro componente serviço que contém a garantia.
eu preciso que o produto não se repita lá embaixo e sim que ele só adicione os produtos que o usuário selecionar para adicionar no carrinho.
To achando estranho esses componentes carrinho-produtos e carrinho-servico não estarem recebendo qualquer propriedade do item (que imagino ser cada produto adicionado ao carrinho), pois, acredito que esses componentes apenas renderizar de acordo com o item passado.
Será que vc não deveria alterar seus componentes para receber o produto do carrinho? Algo tipo assim:
<app-carrinho-produtos produto="item"></app-carrinho-produtos>
<app-carrinho-servico produto="item"></app-carrinho-servico>
Como está a implementação desses dois componentes?
Quando for postar código, evite ao máximo mandar imagens, sempre mande o código copiando e colando, pois facilita demais na hora de ajudar
Esse é o meu app-carrinho-produto
<div *ngFor="let itemCarrinho of itensCarrinho" class="product-item">
<div class="d-flex">
<div class="mr-3">
<img [src]="itemCarrinho.imagem" alt="">
</div>
<h3>{{itemCarrinho.descricao}}</h3>
<div class="flex-grow-1">
<div class="d-flex flex-column align-items-center">
<label class="mb-0">
Quant.
</label>
<div class="d-flex align-items-center">
<div class="d-flex">
<button class="quantity-button btn-arrow" (click)="decrementar(itemCarrinho)">
<svg width="24" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 4L8 12L16 20" stroke="#0077b6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style=""></path>
</svg>
</button>
<input type="number" [(ngModel)]="itemCarrinho.quantidade"
(change)="carrinhoService.calcularTotal(itensCarrinho)" max="1500" class="mr-2 input-quantidade"
id="input-quantidade"
(input)="itemCarrinho.quantidade = (itemCarrinho.quantidade === 0 ? 1 : itemCarrinho.quantidade); validarQuantidadeMaxima(); atualizarTotal(itemCarrinho)">
<button id="increment-button" class="quantity-button btn-arrow" (click)="incrementar(itemCarrinho)">
<svg width="24" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4L20 12L10 20" stroke="#0077b6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style=""></path>
</svg>
</button>
</div>
</div>
<button class="btn btn-outline-danger btn-remover" (click)="removeProdutoCarrinho(itemCarrinho.id)" >
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16" style="margin-right: 0.5rem;">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
<path fill-rule="evenodd"
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
</svg>
Remover
</button>
</div>
</div>
<div>
<label class="mb-0">
Preço à vista no PIX:
</label>
<h3 style="color: blue;"class="class cart-total ">{{carrinhoService.total | currency: "BRL"}}</h3>
</div>
</div>
</div>
Esse é o meu app-carrinho-serviço
<div class="container">
<div class="row">
<div class="bg-light p-4">
<h2 class="fw-bold mb-4">SERVIÇOS</h2>
<h5 class="fw-bold mb-2">GARANTIA ESTENDIDA</h5>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="garantia" id="sem-garantia" value="sem garantia" [(ngModel)]="garantiaSelecionada" checked>
<label class="form-check-label" for="sem-garantia">
Sem garantia
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="garantia" id="garantia-12" value="+12 meses"
[(ngModel)]="garantiaSelecionada" (change)="atualizarGarantia($event)">
<label class="form-check-label" for="garantia-12">
Garantia estendida +12 meses <span>({{valorGarantia12 | currency:'BRL'}})</span>
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="garantia" id="garantia-24" value="+24 meses"
[(ngModel)]="garantiaSelecionada" (change)="atualizarGarantia($event)">
<label class="form-check-label" for="garantia-24">
Garantia estendida +24 meses <span>({{valorGarantia24 | currency:'BRL'}})</span>
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="garantia" id="garantia-36" value="+36 meses"
[(ngModel)]="garantiaSelecionada" (change)="atualizarGarantia($event)">
<label class="form-check-label" for="garantia-36">
Garantia estendida +36 meses <span>({{valorGarantia36 | currency:'BRL'}})</span>
</label>
</div>
<div *ngIf="garantiaSelecionada && garantiaSelecionada !== 'sem garantia'" class="bg-light p-4 mt-3 d-flex justify-content-between align-items-center">
<b style="color:rgb(127, 133, 141)">Garantia estendida - <span [ngStyle]="{'color':'blue'}">{{garantiaSelecionada}}</span> </b>
<b style="color:rgb(0, 0, 0);">Subtotal serviços: <span style="font-weight: normal;">({{valorGarantia | currency:'BRL'}})</span></b>
</div>
</div>
</div>
</div>
Vc tem um componente que faz um ngFor na lista itensCarrinho (app-carrinho-produto), dentro de outro ngFor sobre a mesma lista itensCarrinho (só que usando a função getItensUnicos. É isso mesmo que vc quer fazer? Pra mim, parece bem estranho essa forma que vc fez.
Não é o que eu quero fazer, esse getItensUnicos estava procurando uma solução no chatGpt e ele me encaminhou para esse caminho, o que eu gostaria era só que toda vez que o produto for adicionado no carrinho, que ele não se repetisse, onde ele teria seu próprio produto e serviço.
Tente alterar o componente app-carrinho-produto para renderizar um Produto apenas, e passe o produto via @Input para ele, ficando assim:
<app-carrinho-produtos produto="item"></app-carrinho-produtos>
aproveita e renomeia o componente para singular:
app-carrinho-produto
Amigo muito obrigado, deu certo, conseguir fazer com que ele renderizasse apenas um produto e no caso do app-carrinho-serviço para cada um ter um serviço, era só eu colocar esse componente no app-carrinho-produtos, considerando sua dica de renomear o componente para singular irei renomear sim, obrigado.
1 curtida