E-commerce Angular Garantia

Front-end
#1

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.

image
image1348×1190 127 KB

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>
#2

De onde está vindo a variável produto que vc está passando para o componente app-carrinho-servico?

#3 
import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { CarrinhoService } from 'src/app/carrinho.service';
import { IProduto, IProdutoCarrinho } from 'src/app/produtos';

interface IProdutoComGarantia {
  produto: IProdutoCarrinho;
  garantiaSelecionada: string;
}

@Component({
  selector: 'app-carrinho-produtos',
  templateUrl: './carrinho-produtos.component.html',
  styleUrls: ['./carrinho-produtos.component.css']
})
export class CarrinhoProdutosComponent implements OnInit {
  itensCarrinho: IProdutoCarrinho[] = [];
  valorAnteriorQuantidade: number = 0;
  @Input() produto: IProdutoCarrinho;
  @Output() produtoRemovido: EventEmitter<number> = new EventEmitter();
  produtoGarantiaSelecionada: string = '';

  constructor(
    public carrinhoService: CarrinhoService,
    private router: Router

  ) {  this.produto = {} as IProdutoCarrinho;}
#4

Desse jeito, vc está passando um produto vazio {}. Penso que tu deveria passar o produto referente ao itemCarrinho do ngFor:

<app-carrinho-servico
  [produto]="itemCarrinho.produto"
  [garantiaSelecionada]="produtoGarantiaSelecionada"
  (garantiaSelecionada)="selecionarGarantia($event, produto)">
</app-carrinho-servico>
#5

Eu acho que vou desistir e colocar para renderizar só para o carrinho mesmo, não sou de desistir mas já estou um tempão tentando resolver e não consigo, obrigado lucas.

#6

Da forma como postei não funcionou não? Deu algum erro?

#7

Deu erro sim, que não tem produto dentro de carrinhoservice, sei que tem que criar e eu criei, mas continua o mesmo.

#8

Mostra o código alterado e a mensagem do erro ai pra gente ver.

#9

image
image1511×229 18.7 KB

image
image1623×908 77.4 KB