Estou com um certo problema tenho um app-carrinho-produtos.componente que chama o app-carrinho-servico.componente que contém as informações de garantia. Preciso que quando ao selecionar o radio do primeiro produto não interfira no outro radio do outro produto, já tentei de tudo da forma que consigo entender, se alguém poder me dar uma luz agradeço muito.
esse é o meu carrinho-produto.componente =
<div *ngFor="let itemCarrinho of itensCarrinho" class="product-item">
<div class="separadorendereco"></div>
<div class="d-flex">
<div class="mr-3">
<img [src]="itemCarrinho.imagem" alt="">
</div>
<div class="descricao">
<h3>{{itemCarrinho.descricao}}</h3>
</div>
<div class="flex-grow-1">
<div class="d-flex flex-column align-items-center quant-div" >
<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"></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"></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 ">{{itemCarrinho.preco * itemCarrinho.quantidade| currency: "BRL"}}</h3>
</div>
</div>
<!-- <app-carrinho-servico [produto]="produto"></app-carrinho-servico> -->
<app-carrinho-servico [produto]="produto" [garantiaSelecionada]="produtoGarantiaSelecionada" (garantiaSelecionada)="selecionarGarantia($event, produto)"></app-carrinho-servico>
</div>
e esse é o meu carrinho-servico.componente =
<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> -->
<input class="form-check-input" type="radio" name="garantia-{{index}}" id="semgarantia-{{produto.id}}" value="sem garantia"
[(ngModel)]="produto.garantiaSelecionada" (change)="atualizarGarantia($event, produto.id)">
<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-{{index}}" id="garantia-12-{{produto.id}}" value="+12 meses"
[(ngModel)]="produto.garantiaSelecionada" (change)="atualizarGarantia($event, produto.id)">
<label class="form-check-label" for="garantia-12-{{produto.id}}">
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-{{index}}" id="garantia-24-{{produto.id}}" value="+24 meses"
[(ngModel)]="produto.garantiaSelecionada" (change)="atualizarGarantia($event, produto.id)">
<label class="form-check-label" for="garantia-24-{{produto.id}}">
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-{{index}}" id="garantia-36-{{produto.id}}" value="+36 meses"
[(ngModel)]="produto.garantiaSelecionada" (change)="atualizarGarantia($event, produto.id)">
<label class="form-check-label" for="garantia-36-{{produto.id}}">
Garantia estendida +36 meses <span>({{valorGarantia36 | currency:'BRL'}})</span>
</label>
</div>
<div *ngIf="produto.garantiaSelecionada && produto.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'}">{{produto.garantiaSelecionada}}</span> </b>
<!-- <b style="color:rgb(0, 0, 0);">Subtotal serviços: <span style="font-weight: normal;">({{valorGarantia | currency:'BRL'}})</span></b> -->
<b style="color:rgb(0, 0, 0);">Subtotal serviços: <span style="font-weight: normal;">({{valorGarantiaSelecionada | currency:'BRL'}})</span></b>
</div>
</div>
</div>
</div>
