-1

Estou criando uma loja online usando Angular, tenho a página /produtos que me mostra todos os produtos de uma lista que fica dentro do arquivo 'produtos.ts', mas quando clico em qualquer um dos produtos dessa página, ele me redireciona sempre para o 1º item dessa lista.

Por exemplo, eu clico no produto "monitor" com id 2, ele me redireciona para localhost:4200/produtos/2 mas abre o produto de id 1. O mesmo acontece com TODOS os itens da lista, ele sempre me mostra o 1º item (sei disso pois comentei o 1º item e aí ele começou a mostrar o item de id 2, então o problema é sempre o 1º item mesmo, e não o id).

produtos.ts

export interface IProduto {
    id: number;
    descricao: string;
    preco: number;
    descricaoPreco: string;
    quantidadeEstoque: number;
    imagem: string;
}

export interface IProdutoCarrinho extends IProduto {
    quantidade: number;
}

export const produtos: IProduto[] = [
    { id: 1, descricao: "Mouse gamer", preco: 439.00, descricaoPreco: "À vista no PIX", imagem: "/assets/mouse-3.jpg", quantidadeEstoque: 10 },
    { id: 2, descricao: "Monitor muito bom", preco: 1200.50, descricaoPreco: "À vista no PIX", imagem: "/assets/monitor-1.jpg", quantidadeEstoque: 10 },
    { id: 3, descricao: "Teclado excelente", preco: 749.99, descricaoPreco: "À vista no PIX", imagem: "/assets/teclado-1.jpg", quantidadeEstoque: 10 },
    { id: 4, descricao: "Fone para quem joga FPS", preco: 599.99, descricaoPreco: "À vista no PIX", imagem: "/assets/fone-de-ouvido-2.jpg", quantidadeEstoque: 10 },
    { id: 5, descricao: "Fone de ouvido", preco: 299.99, descricaoPreco: "À vista no PIX", imagem: "/assets/fone-de-ouvido-1.jpg", quantidadeEstoque: 10 },
    { id: 6, descricao: "Fone de ouvido bom", preco: 399.99, descricaoPreco: "À vista no PIX", imagem: "/assets/fone-de-ouvido-3.jpg", quantidadeEstoque: 10 },
    { id: 7, descricao: "HD 1TB", preco: 499.99, descricaoPreco: "À vista no PIX", imagem: "/assets/hd.jpg", quantidadeEstoque: 10 },
    { id: 8, descricao: "Combo de placa de vídeos", preco: 18449.99, descricaoPreco: "À vista no PIX", imagem: "/assets/placa-video.jpg", quantidadeEstoque: 10 },
    { id: 9, descricao: "Processador Ryzen", preco: 1000, descricaoPreco: "À vista no PIX", imagem: "/assets/processador.jpg", quantidadeEstoque: 10 },
    { id: 10, descricao: "Notebook bom", preco: 2500, descricaoPreco: "À vista no PIX", imagem: "/assets/laptop-1.jpg", quantidadeEstoque: 10 },
    { id: 11, descricao: "Notebook excelente", preco: 4500, descricaoPreco: "À vista no PIX", imagem: "/assets/laptop-2.jpg", quantidadeEstoque: 10 },
    { id: 12, descricao: "Mouse barato", preco: 20, descricaoPreco: "À vista no PIX", imagem: "/assets/mouse-1.png", quantidadeEstoque: 10 },
    { id: 13, descricao: "Mouse ótimo", preco: 200, descricaoPreco: "À vista no PIX", imagem: "/assets/mouse-2.jpg", quantidadeEstoque: 10 },
    { id: 14, descricao: "Mouse pequeno", preco: 50, descricaoPreco: "À vista no PIX", imagem: "/assets/mouse-4.jpg", quantidadeEstoque: 10 },
    { id: 15, descricao: "Teclado bom", preco: 159.99, descricaoPreco: "À vista no PIX", imagem: "/assets/teclado-2.jpg", quantidadeEstoque: 10 },
]

produtos.component.html

<section class="product-list">
    <div class="product-list__card" *ngFor="let produto of produtos">
        <a routerLink="/produtos/{{produto.id}}" class="product-list__link">
            <img [src]="produto.imagem">
            <h2 class="product-item__name">
                {{ produto.descricao }}
            </h2>
            <p class="product-item__price">
                {{ produto.preco | currency: "BRL" }}
            </p>
            <p class="product-item__price-description">
                {{ produto.descricaoPreco }}
            </p>
            <button class="product-item__buy-button" type="button">Comprar</button>
        </a>
    </div>
</section>

detalhes-produto.component.html

<section class="product__container">
    <div class="product-image__container">
        <img [src]="produto?.imagem" alt="">
    </div>
    <div class="product-description__container">
        <h2 class="product__name">{{ produto?.descricao }}</h2>
        <h3 class="product__price">{{ produto?.preco | currency: "BRL" }}</h3>
        <p>Estoque disponivel:</p>
        <label>
            Quantidade:
            <input type="number" [(ngModel)]="quantidade" min="1">
            unidade(s)
        </label>
        <p class="product__availability">
            {{ produto?.quantidadeEstoque }} unidade(s) em estoque
        </p>
        <button (click)="adicionarAoCarrinho()">Adicionar ao carrinho</button>
    </div>
</section>

produtos-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DetalhesProdutoComponent } from './detalhes-produto/detalhes-produto.component';
import { ProdutosComponent } from './produtos.component';

const routes: Routes = [
  { path: '', component: ProdutosComponent },
  { path: ':id', component: DetalhesProdutoComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProdutosRoutingModule { }

detalhes-produto.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarrinhoService } from 'src/app/carrinho.service';
import { NotificacaoService } from 'src/app/notificacao.service';
import { IProduto, IProdutoCarrinho } from 'src/app/produtos';
import { ProdutosService } from 'src/app/produtos.service';

@Component({
  selector: 'app-detalhes-produto',
  templateUrl: './detalhes-produto.component.html',
  styleUrls: ['./detalhes-produto.component.css']
})
export class DetalhesProdutoComponent implements OnInit {
  produto: IProduto | undefined;
  quantidade = 1;

  constructor(
    private produtosService: ProdutosService,
    private route: ActivatedRoute,
    private notificacaoService: NotificacaoService,
    private carrinhoService: CarrinhoService
  ) {}

  ngOnInit(): void {
    const routeParams = this.route.snapshot.paramMap;
    const produtoId = Number(routeParams.get('id'));
    this.produto = this.produtosService.getOne(produtoId);
  }

  adicionarAoCarrinho() {
    this.notificacaoService.notificar("O produto foi adicionado ao carrinho");
    const produto: IProdutoCarrinho = {
      ...this.produto!,
      quantidade: this.quantidade
    }
    this.carrinhoService.adicionarAoCarrinho(produto);
  }

}

produtos.service.ts

import { Injectable } from '@angular/core';
import { IProduto, produtos } from './produtos';

@Injectable({
  providedIn: 'root'
})
export class ProdutosService {
  produtos: IProduto[] = produtos;

  constructor() { }

  getAll() {
    return this.produtos;
  }

  getOne(produtoId: number) {
    return this.produtos.find(produto => produto.id = produtoId);
  }
}

exemplo do item de id 1 (mouse) sendo mostrado quando clico no item de id 2 (deveria ser um monitor): imagem que mostra o erro

4
  • Mostra o conteúdo de detalhes-produto.component.ts. 15/02/2023 às 12:19
  • acabei de adicionar, é o ultimo item antes da imagem :)
    – biawenzel
    15/02/2023 às 20:30
  • Parece que está tudo correto. Acredito que o problema esteja no método getOne da ProdutosService, se importaria de mostrá-la? 15/02/2023 às 21:13
  • acabei de adicionar, tbm no final do post :)
    – biawenzel
    17/02/2023 às 13:24

1 Resposta 1

0

No método getOne da classe ProdutosService, vc deveria fazer uma comparação, mas esta fazendo uma atribuíção.

Para corrigir, troque isto:

this.produtos.find(produto => produto.id = produtoId);

Por isto:

this.produtos.find(produto => produto.id === produtoId);
1
  • 1
    funcionou!!! muuuuito obrigada! eu nunca teria achado esse erro sozinha
    – biawenzel
    19/02/2023 às 18:16

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 .