0

primero que nada gracias si te tomaste tiempo de darme una mano. Tengo un carrito de compras en el que agrego productos; tengo una pagina con el detalle de los productos agregados al carrito en filas, es decir una fila por cada producto, y al lado una columna de acciones para agregar y quitar productos que ya fueron seleccionados y que ya se encuentran en el carrito de compras. conseguí agregar productos, pero no consigo eliminarlos, o sea, no consigo eliminar un producto en particular. me podrías ayudar?

Modelo

export interface Product {
  id: string;
  title: string;
  price: number;
  description: string;
  image: string;
}

HTML

<mat-horizontal-stepper>
<mat-step>
<ng-template matStepLabel>Sus Productos</ng-template>
<div *ngIf="(products$ | async | countProduct) as products"> 
<p *ngIf="products.length === 0">
No hay productos en el carrito
</p>
<div class="row" *ngFor="let product of products">
<div class="col-xs-12 col-ms-2 col-md-2">
<div class="box">
{{ product.title }}
<img class="image" [src]="product.image" alt="">
</div>
</div>
<div class="col-xs-12 col-ms-2 col-md-2">
<div class="box">
<p>Cantidad</p>
{{ product.cantidad }}
</div>
</div> 
<div class="col-xs-12 col-ms-2 col-md-2">
<div class="box">
<p>Precio unidad</p>
{{ product.price | currency}}
</div>
</div> 
<div class="col-xs-12 col-ms-2 col-md-2">
<div class="box">
<button mat-raised-button color="prmary" (click)="addProduct(product)">
+
</button>
<button mat-raised-button color="prmary" (click)="deleteProduct(product)">
-
</button>
</div>
</div> 
</div>
<button mat-raised-button color="primary" matStepperNext 
[disabled]="products.length === 0">Siguiente</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Datos Personales</ng-template>
<app-customer-data></app-customer-data>
</mat-step>
<mat-step>
<ng-template matStepLabel>Pago</ng-template>
<h1>pago</h1>
</mat-step>
</mat-horizontal-stepper>

Servicio

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class CartService {

private products: Product[] = []; 
private cart = new BehaviorSubject<Product[]>([]);
cart$ = this.cart.asObservable();

constructor() { }

addCart(product: Product) { 
this.products = [...this.products, product]; 
this.cart.next(this.products); 
}

deleteCart(product: Product) {
const eliminar = this.products.findIndex(p => p.id === product.id);
this.products = [...this.products.splice(eliminar), product];
this.cart.next(this.products);
}
}

Componente

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Product } from './../../../core/models/product.model';
import { CartService } from './../../../core/services/cart.service';

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.scss']
})
export class OrderComponent implements OnInit {

products$: Observable<Product[]>; 

constructor(
private cartService: CartService 
){
this.products$ = this.cartService.cart$; 

}

addProduct(product: Product) {
this.cartService.addCart(product);
}

deleteProduct(product: Product) {
this.cartService.deleteCart(product);
}

ngOnInit(): void {
}
}
4
  • Por favor, no publiques imagenes con código, publica el código mismo (como texto).
    – jachguate
    Commented el 9 ago. 2020 a las 20:57
  • Lo primero seria copiar el codigo que tienes y ponerlo en la pregunta, pues como ha dicho el usuario @jachguate el codigo no debe estar en imagenes segun lineamientos de la comunidad, leer Cómo preguntar, lo segundo es que el componente no nos aporta tanta informacion en este caso como nos lo podria aportar el HTML en si, en tu caso solo nos muestras 2 botones que se encargan de agregar y eliminar, pero como muestras esos elementos?, esa es la duda mas grande, por que si es por medio de un *ngFor angular tiene una peculiaridad que tendria que explicarte.
    – Layer
    Commented el 9 ago. 2020 a las 22:23
  • Sin embargo se agradece que pongas el codigo de tu componente para poder vizualizar mejor el problema, si editas tu codigo y lo pones como texto no te olvides de agregar esa informacion.
    – Layer
    Commented el 9 ago. 2020 a las 22:25
  • Hola, muchas gracias, no sabía que no podía subir una imagen del código, lo reemplazaré y agregaré más información.
    – Emma
    Commented el 10 ago. 2020 a las 12:22

2 respuestas 2

2

Usa el metodo findIndex() al cual de pasas un método para validar la igual del objecto, p = producto , si el producto es distinto puedes tambien usar p.id = producto.id.

let productos = []
let producto = { id: 441 }
let producto1 = { id: 442 }
let producto2 = { id: 443 }

// agrega los 3 productos
productos.push(producto)
productos.push(producto1)
productos.push(producto2)

// busca el indice del objeto a eliminar
let eliminar = productos.findIndex( p => p == producto)
// se eliminar lo contenido en el indice
productos.splice(eliminar,1);

console.log(productos)

1
  • Hola Diego, muchas gracias por tu tiempo, sigo sin poder eliminar un producto solo, modifiqué el código pero no me da el resultado esperado.
    – Emma
    Commented el 10 ago. 2020 a las 12:46
1

El problema está en la siguiente línea this.products =[...this.products.splice(eliminar), product];.

Estas añadiendo otra vez el producto borrado con el splice. La variable product no hace falta que la vuelves a añadir en el array. Debería ser así this.products = [...this.products.splice(eliminar)];

Otro error es que el splice no te devuelve un nuevo array con los nuevos elementos sino que modifica el array original que tiene y devuelve los elementos borrado. Por lo tanto, el spread que haces [...this.products.splice(eliminar)]; no es correcto.

La solución sería así.

deleteCart(product: Product) {
  const eliminar = this.products.findIndex(p => p.id === product.id); 
  this.products.splice(eliminar, 1);
  // si quieres crear un array nuevo puedes hacer lo siguiente
  // this.products = [...this.products];
  
  this.cart.next(this.products);
}
1
  • Muchas pero muchas gracias! funcionó! gracias por tomarte el tiempo de ayudarme.
    – Emma
    Commented el 10 ago. 2020 a las 18:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.